CSSの ::before や ::after は、装飾表現をHTML構造から切り離すための非常に強力な仕組みです。アイコンの追加、装飾線、背景表現、UIパーツの補助など、実務の現場ではほぼ必ず使われる一方で、「何でもかんでも before/after で作ってしまう」ことで可読性や保守性を落としてしまうケースも少なくありません。本記事では、::before / ::after を正しく活用するための設計視点と、実務で再利用しやすい代表的な活用パターンを整理して解説します。
::before / ::after の本質的な役割
::before と ::after は、要素の前後に「装飾専用の疑似要素」を追加する仕組みです。HTML上には存在しないため、意味構造やアクセシビリティに影響を与えず、見た目だけをCSS側で補完できます。この性質から、情報そのものではなく、視覚的補助やUI装飾に限定して使うことが基本原則になります。
contentプロパティを正しく理解する
疑似要素は content が指定されて初めて描画されます。テキストを表示することもできますが、実務では空文字を指定し、図形や装飾として使うケースがほとんどです。content に実データを入れてしまうと、HTMLとの責務分離が崩れ、保守性が下がる原因になります。
.box::before {
content: "";
}
アイコン・マーカーを追加する定番パターン
before/after の代表的な用途が、リストマーカーやリンク補助アイコンの追加です。HTMLを汚さずに装飾できるため、デザイン変更にも柔軟に対応できます。
.link::after {
content: "";
display: inline-block;
width: 0.4em;
height: 0.4em;
border-top: 2px solid currentColor;
border-right: 2px solid currentColor;
transform: rotate(45deg);
margin-left: 0.3em;
}
このように currentColor を使えば、テキスト色と自然に連動します。
装飾線や区切りをHTMLに書かない
見出しの下線やセクション区切りのラインをHTML要素で書いてしまうと、意味構造が崩れがちです。before/after を使えば、構造を保ったまま装飾だけを追加できます。
.heading {
position: relative;
padding-bottom: 0.5em;
}
.heading::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 40px;
height: 2px;
background: currentColor;
}
背景装飾や重ね表現に使う
カードUIやボタン装飾では、before/after を背景レイヤーとして使うことで、HTMLを増やさずに奥行き表現や装飾を追加できます。z-index と position を適切に管理することがポイントです。
.card {
position: relative;
z-index: 0;
}
.card::before {
content: "";
position: absolute;
inset: 0;
background: rgba(0, 0, 0, 0.05);
border-radius: 8px;
z-index: -1;
}
吹き出し・ツールチップの矢印表現
before/after は、吹き出しやツールチップの矢印を作る用途でも非常に相性が良いです。本体要素と同色・同形状で管理できるため、一体感のあるUIになります。
.tooltip {
position: relative;
padding: 8px 12px;
background: #333;
color: #fff;
border-radius: 4px;
}
.tooltip::after {
content: "";
position: absolute;
bottom: -6px;
left: 16px;
width: 12px;
height: 12px;
background: #333;
transform: rotate(45deg);
}
レイアウト用途に使ってはいけない理由
before/after はレイアウト要素ではありません。高さや幅の確保、コンテンツ配置のために使うと、意図しない崩れやデバッグ困難なCSSになりがちです。あくまで「装飾レイヤー」として使い、レイアウトは通常のHTML要素で構築することが重要です。
アクセシビリティとSEOの観点
疑似要素の内容はスクリーンリーダーに読まれないため、意味を持つ情報を before/after に含めてはいけません。チェックマークや矢印などは問題ありませんが、「必須」「NEW」など意味を持つラベルはHTMLで表現するべきです。
保守性を高める設計ルール
before/after を多用する場合は、用途を明確に分け、装飾専用クラスとして管理すると保守性が向上します。1つの要素に無秩序に疑似要素を詰め込むのではなく、「何の装飾か」をCSS設計で表現することが重要です。
まとめ
::before / ::after は、HTML構造を汚さずに装飾を追加できる非常に強力なCSS機能です。アイコン、装飾線、背景、矢印など、視覚的補助に限定して使うことで、保守性と拡張性を両立できます。レイアウトや意味情報には使わず、「装飾専用レイヤー」として正しく役割分担することが、実務で破綻しない before/after 活用のポイントです。
