【css】::before / ::afterの使い方

今回の記事では、文字の横にアイコンを配置するときなどに便利な擬似要素（::before / ::after ）についてご紹介します。

擬似要素とは

擬似要素とは、cssセレクタに追加することで、要素の前後に内容を挿入することができます。

下記の例のように、cssセレクタに「::before」または「::after」を付記し、追加したい文字を「content:”〜〜”;」で指定することで再現できます。

【HTML】

<p>擬似要素</p>


【CSS】

p{
  font-weight: bold;
 }
p::before{
  content:"「::before」で追加";
  font-weight: normal;
  margin-right: 15px;
  background: khaki;
  padding: 3px 13px 3px 0px;
}
p::after{
  content:"「::after」で追加";
  font-weight: normal;
  margin-left: 15px;
  background: khaki;
  padding: 3px 13px 3px 0px;
}

活用方法①　見出しに英語表記を追記する

見出しに英語の表記を追記する際に活用できます。
この場合は、positionを使用して位置を調整することで、画面幅に応じた位置変更などにも対応できます。

【HTML】

<h1>サンプル</h1>

【CSS】

h1{
  position: relative;
  display: inline-block;
  font-size: 16px;
}
h1::after{
  position: absolute;
  content: "sample";
  font-size: 8px;
  left: 50%;
  transform: translateX(-50%);
  bottom: -15px;
  color: royalblue;
}

活用方法②　文字の前に記号をつける

箇条書きを行うときの記号にも活用できます。

【HTML】

<ul>
  <li>あああ</li>
  <li>いいい</li>
  <li>ううう</li>
</ul>

【CSS】

li{
  list-style: none;
}
li::before{
  content: "◆";
  padding-right: 5px;
  color: royalblue;
}

上記の例では、「◆」を使用しましたが、ここは「url( )」で指定することで、お好きな画像を用いることもできます。

活用方法③　文字に装飾をつける

これまでの例では、文字（または記号）を追加しましたが、装飾を追加することも可能です。

【HTML】

<ul>
  <li>あああ</li>
  <li>いいい</li>
  <li>ううう</li>
</ul>

【CSS】

ul{
  display: flex;
}
li{
  list-style: none;
  position: relative;
  padding: 10px;
  }
li::after{
  content: "";
  position: absolute;
  width:1px;
  height: 20px;
  background: royalblue;
  margin-left: 10px;
  top:50%;
  transform: translateY(-50%);
}

今回の場合は、「content: ” ” 」は空白とし、背景色で境界線を再現しています。追加する文字が無い場合でも「content」の指定は必要ですので、忘れないように気をつけてください。

このように様々な場面で活用できますので、ぜひ使ってみてください。