CSS講座 / 擬似要素：before・afterで装飾を加える

CSS講座

CSSの擬似要素は要素の一部分を装飾したり、表示のためのボックスを作ったりする仕組みです。beforeとafterは点や線などに使えますが、営業時間や操作名などの重要な内容はHTMLに残します。

擬似クラスと擬似要素を区別する

擬似クラスは既存の要素の状態や構造上の条件を選びます。a:hoverはポインターを重ねたリンク自体、a::afterはリンクの内容の後ろに作る擬似要素を選びます。新しいコードでは擬似クラスをコロン一つ、擬似要素を二つで書くと区別しやすくなります。

a:hover { color: #1d4ed8; }
a::after { content: ""; }

beforeとafterは元のHTMLへ兄弟タグを追加するものではありません。選んだ要素の内容の前後に表示用のボックスを作ります。開発者ツールで別の行に見えても、元ファイルにspanを書いたこととは異なり、通常の子要素を探すコードで同じように取得できるわけではありません。

content・display・currentColorの役割

h1::before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  background-color: currentColor;
}

content: ""は文字のない擬似要素を生成します。空文字でも大きさと背景を与えると装飾として見えます。contentを省略したりnoneにしたりすると、この擬似要素は生成されません。大きさや背景だけを指定しても点は出ません。

beforeとafterの初期表示はinlineです。幅と高さを持つ点にはinline-block、内容の下の線にはblockを使います。大きさを指定したのに見えない場合はdisplayの違いとMDNのbeforeリファレンスを確認します。

currentColorはその要素のcolor、つまり現在の文字色を参照するキーワードです。見出しの文字色を変えると点も同じ色になります。幅と高さが同じボックスにborder-radius: 50%を指定すると円になり、margin-rightが文字との間隔になります。

見出しの点とリンクの線を作る

次の全体をindex.htmlに保存します。見出しの前に12pxの点、リンクの下に2pxの線を作り、hoverとキーボードフォーカスで線を4pxにします。リンク本来の下線も残すので、追加の線がなくてもリンクを識別できます。

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Small Garden</title>
  <style>
body { margin: 24px; font-family: sans-serif; line-height: 1.7; color: #333; }
    h1 { color: #087f5b; font-size: 30px; }
    h1::before {
      content: "";
      display: inline-block;
      width: 12px;
      height: 12px;
      margin-right: 10px;
      border-radius: 50%;
      background-color: currentColor;
    }
    a { display: inline-block; color: #087f5b; text-decoration: underline; }
    a::after {
      content: "";
      display: block;
      height: 2px;
      margin-top: 4px;
      background-color: currentColor;
    }
    a:hover::after, a:focus-visible::after { height: 4px; }
    a:focus-visible { outline: 2px solid #1d4ed8; outline-offset: 4px; }
  </style>
</head>
<body>
<h1>Small Garden</h1>
  <p>We open at 9 a.m. every day.</p>
  <a href="#visit">Visitor Information</a>
  <h2 id="visit">What to bring</h2>
  <p>Bring a water bottle and comfortable shoes.</p>
</body>
</html>

見出しの「Small Garden」はHTMLの本文で、前の円だけがCSSの装飾です。リンク名と移動先もHTMLにあります。a:hover::afterは「hover状態のaのafter」を選ぶ条件として分けて読みます。

図では、文字とリンク先を同じにしたまま装飾の有無を比較しています。線は通常2pxで、hoverまたはキーボードフォーカス時に4pxになります。

必要な情報はHTMLに置く

内容	置く場所	理由
見出し前の点や装飾線	CSSの擬似要素	なくても内容の意味と操作が保たれます。
営業時間・価格・注意事項	HTMLの本文	CSSを無効にした場合や別の方法で読む場合も情報が必要です。
ボタン名・リンク名	HTMLの実際の内容	操作するものの名前を装飾の生成に依存させません。

生成内容が読み上げられるかはブラウザーや支援技術によって異なります。必須入力をcontent: "Required"だけで伝えず、実際のラベルや説明に書きます。画面に見えることだけでアクセシビリティを判断しないでください。

imgなどの置換要素にbeforeやafterを付ける方法にも依存しない方が安全です。画像の周囲を装飾するなら、画像を囲む通常のHTML要素に擬似要素を付ける構成を検討します。

出ない原因を順番に調べる

見出しのcontentを空文字からnoneに変えます。文字を残して点だけが消えることを確認し、空文字へ戻します。
点のdisplayをinline-blockからinlineに変えます。文字のないinlineでは幅と高さだけで12pxの点を維持できないことを確認して戻します。
h1の色を#1d4ed8に変えます。点も青くなり、リンクは緑のままであることを確認します。currentColorはページ共通の一色を意味しません。
リンクにポインターを重ねて線の太さを見ます。次にポインターを離し、Tabで線とフォーカスの輪郭を確認します。

まずセレクターとcontent、次にdisplay・寸法・背景を調べます。高さを0にして見えなくなっても、擬似要素自体が生成されていないとは限りません。「生成されない」と「描く面積がない」を分けると原因を絞れます。実習後は元の値へ戻し、本文とリンクの操作が残ることを確かめます。

CSS講座