擬似要素を使ってみる

擬似要素を使ってみる〜「:before」「:after」編〜

01:28・2020/12/20　公開

01:30・2020/12/20　更新

新たに実装した「pin」と「new」の実装方法について解説します。

↓「new」の表示期間についてはこちらで↓
WordPressで更新日からの経過時間を反映する

コード

「pin」のコード

/* 固定投稿 */

article {
    position: relative;
}

article.sticky:after {
    content: "pin"!important;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    top: -14px;
    left: 26px;
    height: 14px;
    width: 60px;
    color: #fff;
    background-color: orange!important;
    position: absolute;
    border-radius: 4px 4px 0 0;
    transition: box-shadow .2s;
}

article.sticky:before {
    content: "";
    top: 0;
    left: 26px;
    height: 14px;
    width: 100px;
    background-color: #fff;
    position: absolute;
    z-index: 100;
    transform: translateZ(100px);
}

article:hover.sticky:after {
    box-shadow: 2px 2px 6px #bbb;
}

検証をして、先頭固定表示の投稿の中に「sticky」というクラス名を見つけたので、それを利用しています。

「new」のコード

/* 新着投稿 */

article.new:after {
    content: "new";
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 12px;
    top: -14px;
    left: 26px;
    height: 14px;
    width: 60px;
    color: #fff;
    background-color: #f33;
    position: absolute;
    border-radius: 4px 4px 0 0;
    transition: box-shadow .2s;
}

article.new:before {
    content: "";
    top: 0;
    left: 26px;
    height: 14px;
    width: 100px;
    background-color: #fff;
    position: absolute;
    z-index: 100;
    transform: translateZ(100px)
}

article:hover.new:after {
    box-shadow: 2px 2px 6px #bbb;
}

解説

「:before」「:after」を使うにはコツがあります。

  1. 擬似要素を追加する要素を「position: relative;」にすること
  2. 擬似要素には中身がなくとも「content: “”;」を設定すること
  3. 擬似要素は「position: absolute;」にすること

表示されないなってときは上記を確認してほしいです。

:afterのコード解説

  • content: “new”;
    ↑テキスト(必須)
  • display: flex;
  • align-items: center;
  • justify-content: center;
    ↑flexにして、文字の上下左右を中央揃えにしています。
  • font-weight: bold;
  • font-size: 12px;
    ↑テキストの設定
  • top: -14px;
  • left: 26px;
    ↑位置調整
  • height: 14px;
  • width: 60px;
    ↑サイズ調整
  • color: #fff;
  • background-color: #f33;
    ↑色
  • position: absolute;
    ↑絶対位置表示(必須)
  • border-radius: 4px 4px 0 0;
    ↑上部分のみ丸くしている
  • transition: box-shadow .2s;
    ↑CSSアニメーションの設定

「:after」にはテキストを表示しています。

擬似要素の:hoverについて

ちなみに「:hover」とかは擬似クラスって名前らしいです。

擬似要素の擬似クラスは、擬似要素を設定した元の要素に付けます。

article:hover.new:after {
/*articleをhoverしたとき.newの:afterを変更する*/
box-shadow: 2px 2px 6px #bbb;
}

hoverされたときに擬似要素にも影がつくように設定しました。

:beforeのコード解説

同じ要素に同じ擬似要素を何個も付けたりはできないようなので、「:before」にホバーによってできた影を隠すコードを書きました。

  • content: “”;
    ↑テキスト(必須)
  • top: 0;
  • left: 26px;
    ↑位置調整
  • height: 14px;
  • width: 100px;
    ↑サイズ調整
  • background-color: #fff;
    ↑色
  • position: absolute;
    ↑絶対位置表示(必須)
  • z-index: 100;
  • transform: translateZ(100px);
    ↑表示レイヤーを上に設定する

これで「:after」の側に白い空間が表示され、ホバー時の影を隠すことができます。