CSSの「影武者」を操る：`::before` / `::after` の真髄と現場の流儀
フロントエンドの現場で、「ここにもう一つ要素があればなあ」と悔しい思いをしたことはないだろうか。HTML構造を汚さずに装飾やアイコンを追加したい。そんな時、CSSの擬似要素 `::before` と `::after` は、まさに魔法の杖だ。
今日は、ただ「使い方を知っている」という段階から一歩踏み込み、ブラウザのレンダリングの裏側まで意識した、プロとしての擬似要素の扱い方を伝授しよう。
—
なぜ `content` プロパティが「生命線」なのか
まず基本中の基本だが、`::before` や `::after` を書いても画面に何も出ないという悲劇は、高確率で `content` プロパティの書き忘れか、空文字の指定漏れだ。
ブラウザのレンダリングエンジンにとって、`::before` / `::after` は「DOMツリーには存在しないが、レンダーツリーには追加される仮想的な要素」として処理される。つまり、`content` プロパティが定義されていない（あるいは `none` である）場合、その要素はレンダリングの対象外として切り捨てられてしまう。
たとえ中身が空であっても、`content: “”;` と明示的に記述することで、初めてその要素は「そこに在る」とブラウザに認識される。これは、CSSで何かを「表示」させるための物理的なトリガーなのだ。
—
現場で「使える」プロのテクニック：擬似要素の活用術
現場では、装飾のためだけに `` をHTMLに埋め込むような行為は、「DOM汚染」として嫌われる。特にUIコンポーネントを作る際、擬似要素の使いこなしはコードの清潔度を大きく左右する。
1. リンクに「外部サイトへの遷移アイコン」を添える
いちいちアイコン用のHTMLを書かなくても、リンク先に特定のルールがあれば擬似要素で自動付与できる。
/ 外部サイトへのリンクにアイコンを追加 /
a[target=”_blank”]::after {
content: “↗”; / 外部へのリンクであることを示す記号 /
display: inline-block;
margin-left: 4px;
font-size: 0.8em;
color: #666;
/ 視覚的なアクセントとして最適 /
}
2. 見出しの装飾をスマートに実装する
デザインカンプで見出しの左側に縦線が入っているようなケースも、擬似要素の独壇場だ。
.section-title {
position: relative; / 擬似要素を追従させるための基準点 /
padding-left: 15px;
}
.section-title::before {
content: “”; / これがないと始まらない /
position: absolute;
left: 0;
top: 0;
width: 4px;
height: 100%;
background-color: #3498db; / ブランドカラー /
border-radius: 2px;
}
—
陥りがちな罠と、シニアからのアドバイス
中級者レベルになると、「擬似要素で複雑なことをしすぎる」という罠にハマることがある。ここで一つ、僕からの教訓を伝えておこう。
- 「アクセシビリティを殺さないこと」
擬似要素で作ったコンテンツは、スクリーンリーダー（読み上げソフト）からは無視されることが多い。もし、それが「重要な情報」を伝えているなら、擬似要素ではなくHTMLで書くべきだ。アイコン一つなら良いが、文字情報を擬似要素で入れるのはアクセシビリティの観点からNGだ。
- 「デバッグの難易度を考慮する」
`::before` や `::after` は検証ツールで見ればわかるが、HTMLソースには出てこない。複雑なレイアウトを全て擬似要素で組むと、後から参画したメンバーが「なぜ線が表示されているのか？」と混乱する。装飾は「あくまで装飾」の範囲に留めるのが、チーム開発における美学だ。
—
最後に：CSSは「文書の構造」を壊さないための道具
`::before` / `::after` を使いこなすということは、「HTMLは意味（Semantic）を記述し、CSSは外見（Visual）を構築する」というWebの基本原則を体現することに他ならない。
無理にHTMLをいじって `div` を重ねるのではなく、CSSの擬似要素でスマートに解決する。その積み重ねが、読みやすく、保守しやすく、そして美しいコードベースを作っていく。
今日から君のCSSファイルにある「無駄なラッパータグ」を、擬似要素で置き換えてみてほしい。ブラウザが裏側でどう頑張って描画しているか、検証ツールの「Computed」パネルを見ながらニヤリとできるようになったら、君も立派なフロントエンド・アーキテクトだ。
現場からは以上だ。また次の課題で会おう。
コメント