CSSの疑似要素 ::before と ::after の使い方まとめ

はじめに

今回はCSSの疑似要素である ::before と ::after の使い方についてまとめます。
「なんとなく使っているけど違いがよく分からない」「実際の場面でどう活用する？」と感じている方の参考になれば幸いです。

疑似要素とは

CSSの疑似要素は、HTMLで直接記述していない部分に対して、スタイルやコンテンツを付加できる便利な機能です。
特に ::before と ::after は、ある要素の前後に仮想的な要素を生成し、そこにテキストや装飾を加えることができます。

例：

style.css

.selector::before { content: "前"; }
.selector::after  { content: "後"; }

• ::before … 要素の最初に追加
• ::after … 要素の最後に追加

使いどころ

::before や ::after が活躍する場面はとても多いです。例えば …

• アイコンや記号をテキストの前後に自動で表示したい
• CSSだけで見出しやボックスに装飾（飾り線・バッジなど）をつけたい
• HTMLを書き換えずに擬似的なラベルや角丸、バッジなどを追加したい

デザインの幅を広げるのに非常に便利です。

具体的な使用方法

基本的な使い方

まずはcontentプロパティが必須です。

style.css

.title::before {
  content: "★";
  color: gold;
  margin-right: 0.5em;
}

index.html

<h2 class="title">見出し</h2>

→ 表示: ★ 見出し

装飾例

飾り線（アンダーライン

style.css

.underline::after {
  content: "";
  display: block;
  width: 100px;
  height: 3px;
  background: #42a5f5;
  margin-top: 4px;
  border-radius: 2px;
}

index.html

<p class="underline">装飾付きテキスト</p>

おしゃれなアンダーラインが引かれているのがわかります。

バッジ

style.css

.badge::after {
  content: "NEW";
  background: #f44336;
  color: #fff;
  font-size: 0.7em;
  padding: 2px 6px;
  margin-left: 8px;
  border-radius: 10px;
}

index.html

<span class="badge">アイテム名</span>

バッジが装飾されていることがわかります。

Tips

• 疑似要素はインライン要素にもブロック要素にも使える
• contentは必須（空文字でもOK: content: ""）
• 疑似要素自身にpositionやdisplayなどのスタイルを当てられる
• アイコンフォントやSVG、絵文字とも組み合わせやすい
• ::before・::afterは1つの要素に1回ずつだけ使える
• 装飾専用のため、インタラクションや動的なデータには不向き（JavaScriptで書き換えはできない）
• CSSの疑似要素（::before、::after）は初期状態（デフォルト）ではインライン要素として生成される

最後に

::before と ::after を使いこなせば、HTMLを汚さずCSSだけで見た目をリッチにできます。
ちょっとしたラベルや装飾もコピペで実現できるので、ぜひ活用してみてください。