こんにちは！静岡県浜松市でWEBデザイナーをしています小瀧です。
CSSを書いていて「HTMLを増やさずに装飾したい」「ここにもう一要素あれば楽なのに」と感じたことはないでしょうか。
そんなときに力を発揮するのがCSSの擬似要素です。
擬似要素は、HTMLを一切変更せずに表現力を拡張できる強力な仕組みです。
一方で、使い方を誤ると可読性やアクセシビリティを損なう原因にもなります。
この記事では、CSSで使える擬似要素をカタログ形式で整理し、役割・使いどころ・注意点までをまとめて解説します。
装飾と構造の正しい分離を意識しながら、実務で使える判断軸を持ち帰ってもらえる内容です。
CSSの擬似要素とは
CSSの擬似要素とは、HTML上には存在しない要素を、CSSによって仮想的に生成する仕組みです。
DOM構造は増えませんが、描画上は要素として扱われます。
ポイント
HTMLを汚さずに装飾や補助要素を追加できるのが最大の特徴です。
擬似要素と擬似クラスの違い
- 擬似要素：要素そのものを追加する
- 擬似クラス：状態や条件によってスタイルを切り替える
この記事では擬似要素のみを扱います。
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 の基本構造
- content を必ず指定する
- position で配置を制御する
- 親要素に position: relative を指定する
.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; }アクセシビリティへの配慮が必要です。
使用時の注意点
- contentを指定しないと表示されない
- JavaScriptから直接操作できない
- 情報伝達目的で使わない
使うべき場面・使わない場面
使うべき
- 装飾目的
- 視覚的補助
- レイアウト調整
使わない方がよい
- 意味を持つテキスト
- 操作が必要なUI
- アクセシビリティ重視の要素
まとめ
CSSの擬似要素は、装飾と構造を分離し、CSSの表現力を大きく広げてくれます。
一方で、意味を持たせすぎると設計を壊します。
装飾は擬似要素、意味はHTMLという役割分担を意識することが重要です。
satokotadesignキャンペーン実施中！
