【CSS】疑似要素とは？初心者向けにわかりやすく３分で解説

疑似要素（pseudo-element）は、HTML要素の特定の部分に対してスタイルを適用するために使用されます。

例えば、::beforeや::afterなどの疑似要素を利用することで以下のように「HTMLを直接修正する必要なく」指定した要素の前後にテキストやアイコンを挿入することができます。

See the Pen 疑似要素① by ビズドットオンライン (@biz-online) on CodePen.

このページでは、HTML/CSS初心者向けに疑似要素とは何か？をわかりやすく１から解説します。

このページで学べる内容

Webエンジニアを目指す方であれば知らないと恥ずかしい超・基本知識の１つです。是非最後までご覧ください。

疑似要素とは？

疑似要素（pseudo-element）は、CSSセレクタで使用される擬似クラス（pseudo-class）の一種で、HTML要素の特定の部分に対してスタイルを適用するために使用されます。

See the Pen 疑似要素① by ビズドットオンライン (@biz-online) on CodePen.

詳しく説明すると、以下の sample クラスに対して

<div class="sample">Hello, world!</div>

疑似要素「::before」「::after」が利用されることで、”Hello, world!” という文字列の前後にテキストコンテンツが追加される仕組み。

.sample::before {
  content: 'Before ';
  color: red;
}

.sample::after {
  content: ' After';
  color: blue;
}

このように、ある特定の要素の部分を指し示すのが疑似要素のポイントです。

疑似要素と疑似クラスの違い

疑似要素 vs 疑似クラス

疑似クラスは、要素の状態に基づいてスタイルを適用するために使用されます。例えば、:hoverは要素がマウスオーバーされたときにスタイルを適用するために使用されます。

一方、疑似要素は、要素の特定の部分に対してスタイルを適用するために使用されます。例えば、::beforeや::afterは、要素の前後にテキストやアイコンを追加するために使用されます。

ここまでの説明だけではまだよくわからない・・・！という方も他の疑似要素を見ていくことで徐々にイメージが湧くはずです。

ここからは実際に利用される代表的な疑似要素と、そのサンプルコードを解説します。

以下がよく利用される代表的な疑似要素です。利用頻度としては::beforeや::afterが圧倒的ですが、その他の疑似要素についても知っておくと便利です。

疑似要素	説明
`::before`	要素の開始タグの前にコンテンツを挿入するために使用される。
`::after`	要素の終了タグの後にコンテンツを挿入するために使用される。
`::first-letter`	ブロックレベル要素の最初の文字にスタイルを適用するために使用される。
`::first-line`	要素の最初の行にスタイルを適用するために使用される。
`::selection`	テキストが選択されたときにスタイルを適用するために使用される。
`::placeholder`	フォームの入力欄にプレースホルダーテキストを表示するために使用される。
`::marker`	リストのマーカー（箇条書きの数字や記号など）にスタイルを適用するために使用される。
`::backdrop`	`dialog`要素などの背景にスタイルを適用するために使用される。`::backdrop`は`body`要素よりも上位の階層に配置される。