CSSの疑似要素とは？::before・::afterの使い方

Webサイトを制作していると、HTMLに記述していない線やアイコンなどの装飾をCSSで追加したいことがあります。

そんなときに便利なのが「疑似要素」です。

疑似要素とは？

疑似要素とは、HTMLに新しい要素を追加することなく、要素の前後などにコンテンツや装飾を追加できるCSSの機能です。

代表的なものには、以下があります。

疑似要素	用途
::before	要素の前にコンテンツや装飾を追加
::after	要素の後にコンテンツや装飾を追加
::first-letter	最初の文字にスタイルを適用
::first-line	最初の行にスタイルを適用
::selection	選択した文字にスタイルを適用

この中でも、Web制作では::beforeと::afterが特によく使われます。

::before・::afterの基本

基本的な書き方は以下のとおりです。

.title::before {
  content: "";
}

.title::after {
  content: "";
}

::beforeは要素の前、::afterは要素の後に疑似要素を生成します。

例えば、見出しの前に線を追加することができます。

.title::before {
  content: "";
  display: inline-block;
  width: 30px;
  height: 2px;
  background: #333;
  margin-right: 10px;
}

また、リンクの後ろに矢印を追加することもできます。

.link::after {
  content: "→";
  margin-left: 5px;
}

contentプロパティ

::beforeや::afterを使うときは、基本的にcontentプロパティを指定します。

文字を表示する場合は、

.title::before {
  content: "●";
}

のように指定します。

装飾だけを追加したい場合は、content: "";とします。

.title::before {
  content: "";
}

どんなときに使う？

疑似要素は、主に次のような装飾に使われます。

• 見出しの前後に線や記号を追加する
• リンクに矢印を追加する
• ボタンに装飾を追加する
• 吹き出しの三角形を作る
• 背景や図形を追加する

HTMLとして意味を持つコンテンツではなく、デザイン上の装飾を追加したいときに使うのが基本です。

まとめ

::beforeと::afterは、HTMLを増やさずに装飾を追加できる便利なCSSの機能です。

特に、線・矢印・図形などの装飾ではよく使われるため、Web制作をするなら覚えておきたい機能のひとつです。