CSSの擬似要素の全てまとめ。before・afterから実務活用まで完全整理。

こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
CSSを書いていて「HTMLを増やさずに装飾したい」「ここにもう一要素あれば楽なのに」と感じたことはないでしょうか。
そんなときに力を発揮するのがCSSの擬似要素です。
擬似要素は、HTMLを一切変更せずに表現力を拡張できる強力な仕組みです。
一方で、使い方を誤ると可読性やアクセシビリティを損なう原因にもなります。
この記事では、CSSで使える擬似要素をカタログ形式で整理し、役割・使いどころ・注意点までをまとめて解説します。
装飾と構造の正しい分離を意識しながら、実務で使える判断軸を持ち帰ってもらえる内容です。

---

CSSの擬似要素とは

CSSの擬似要素とは、HTML上には存在しない要素を、CSSによって仮想的に生成する仕組みです。
DOM構造は増えませんが、描画上は要素として扱われます。

---

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

この記事では擬似要素のみを扱います。

---

CSS擬似要素カタログ一覧

::before / ::after

要素の前後に仮想要素を生成します。
最も使用頻度が高い擬似要素です。

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

contentプロパティの指定が必須です。

::first-letter

テキストの最初の1文字を装飾します。

p::first-letter { font-size: 2em; }

雑誌風デザインやコラム表現で使われます。

::first-line

テキストの最初の1行のみを装飾します。

p::first-line { font-weight: bold; }

画面幅の影響を受ける点に注意が必要です。

::selection

ユーザーが文字選択した際の見た目を制御します。

::selection { background: #333; color: #fff; }

ブランド感の演出に向いています。

::marker

リストマーカー部分を装飾できます。

li::marker { color: red; }

::placeholder

フォームのプレースホルダーテキストを装飾します。

input::placeholder { color: #aaa; }

---

::before / ::after の基本構造

.element { position: relative; } .element::before { content: ""; position: absolute; }

---

実務でよくある使用例カタログ

アイコンや装飾の追加

.button::before { content: "→"; margin-right: 0.5em; }

見出し装飾ライン

h2::after { content: ""; display: block; height: 2px; background: #000; }

背景オーバーレイ

.card::before { content: ""; position: absolute; inset: 0; background: rgba(0,0,0,0.4); }

クリック領域拡張

.link::after { content: ""; position: absolute; inset: 0; }

アクセシビリティへの配慮が必要です。

---

使用時の注意点

---

使うべき場面・使わない場面

使うべき

使わない方がよい

---

まとめ

CSSの擬似要素は、装飾と構造を分離し、CSSの表現力を大きく広げてくれます。
一方で、意味を持たせすぎると設計を壊します。
装飾は擬似要素、意味はHTMLという役割分担を意識することが重要です。

 

satokotadesignキャンペーン実施中！