実行できるCSSドキュメント: ::before と ::after

Q: CSS の ::before は何をしますか？

選択した要素の最初の子になる疑似要素を作り、content プロパティで指定したもので中身を埋めます。::after は同じことを最後の子として行います。どちらも HTML には存在しないので、アイコン、ラベル、装飾に便利です。

Q: ::before や ::after が表示されないのはなぜですか？

いちばん多い原因は content プロパティがないことです。これがないと疑似要素は生成されません。装飾用の空のボックスには content: "" を使います。ほかには、インラインのままの疑似要素に幅と高さを指定している (display: block か inline-block を指定する)、 や のように疑似要素を持てない要素に付けている、といった原因があります。

Q: :before と ::before の違いは何ですか？

動作に違いはありません。コロン 2 つの ::before は疑似要素を示す現在の書き方で、コロン 1 つの :before は CSS2 の古い書き方です。ブラウザは before、after、first-line、first-letter についてはまだ受け付けます。

Q: img や input に ::before は使えますか？

確実には使えません。疑似要素は要素のコンテンツの内側に挿入されますが、 などの置換要素や などのフォームコントロールには、そのためのコンテンツボックスがありません。要素を や で囲み、疑似要素はその囲みに付けましょう。

Q: CSS の ::before の内容はスクリーンリーダーで読み上げられますか？

おおむね読み上げられます。content のテキストはふつうアクセシブルな名前に含まれますが、選択やコピーはできません。本当の情報は HTML に書き、疑似要素は装飾や小さな視覚的な手がかりに使いましょう。

::before と ::after の働き

::before は要素の 最初の子 として、::after は 最後の子 としてボックスを挿入します。ボックスの中身は content プロパティで決まります。HTML には何も追加されず、ブラウザが CSS から生成します。

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>before and after</title>
  <style>
    .price::before { content: "$"; color: #16a34a; }
    .price::after { content: " / month"; color: #6b7280; font-size: 14px; }
    .done::before { content: "✓ "; color: #16a34a; font-weight: bold; }
  </style>
</head>
<body>
  <p class="price">9</p>
  <p class="done">Tests pass</p>
</body>
</html>

HTML にあるのは 9 と Tests pass だけです。ドル記号、「/ month」のラベル、チェックマークはすべて CSS から来ています。上の例のように上書きしない限り、疑似要素は要素のスタイル (フォント、色) を継承します。

書き方

selector::before {
  content: "text";   /* required */
  /* any other styles */
}

selector::after {
  content: "";       /* empty string: a box with no text */
}

`content` の値	結果
`"text"`	文字列。改行には `"\A"` (`white-space: pre` と併用)、Unicode 文字には `"\2192"` (→) を使います
`""`	空のボックス。図形や装飾に使います
`attr(data-label)`	要素の属性の値
`counter(step)`	CSS カウンターの値
`open-quote` / `close-quote`	要素の言語に合った引用符
`none` または `normal`	疑似要素なし (`normal` が初期値)

content は必須です。これがないと、ほかにいくつプロパティを指定しても ::before と ::after は作られません。

content: "" で装飾の図形を作る

content: "" にすると、疑似要素はサイズや色を指定できる空のボックスになります。初期状態ではインラインで、インラインのボックスは width と height を無視するので、display: block、inline-block、または position: absolute を指定します:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Shapes</title>
  <style>
    .status::before {
      content: "";
      display: inline-block;
      width: 10px;
      height: 10px;
      border-radius: 50%;
      background: #16a34a;
      margin-inline-end: 8px;
    }
    .status.offline::before { background: #e5e7eb; }

    .heading::after {
      content: "";
      display: block;
      width: 48px;
      height: 4px;
      background: #2563eb;
      margin-top: 6px;
      border-radius: 2px;
    }
  </style>
</head>
<body>
  <h2 class="heading">Section title</h2>
  <p class="status">Online</p>
  <p class="status offline">Offline</p>
</body>
</html>

疑似要素を配置する

要素の上や周りに置く装飾には、疑似要素に position: absolute、要素そのものに position: relative を指定します。こうすると位置は要素を基準に測られます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Underline on hover</title>
  <style>
    .link {
      position: relative;
      color: #2563eb;
      text-decoration: none;
      font-size: 20px;
    }
    .link::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -4px;
      width: 100%;
      height: 2px;
      background: currentColor;
      transform: scaleX(0);
      transition: transform 0.25s;
    }
    .link:hover::after { transform: scaleX(1); }

    .card { position: relative; border: 2px solid #e5e7eb; padding: 16px; margin-top: 24px; }
    .card::before {
      content: "NEW";
      position: absolute;
      top: -12px;
      right: 12px;
      background: #f59e0b;
      padding: 2px 8px;
      font-size: 12px;
      border-radius: 4px;
    }
  </style>
</head>
<body>
  <a class="link" href="#">Hover this link</a>
  <div class="card">A card with a badge from ::before</div>
</body>
</html>

疑似クラスと組み合わせるときの順番に注意してください。状態が先、疑似要素が後で .link:hover::after と書きます。.link::after:hover ではありません。

attr() で属性を読む: ツールチップ

attr() は属性の値を content に取り込むので、1 つのルールで要素ごとに違うテキストを表示できます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Tooltip</title>
  <style>
    [data-tip] { position: relative; border-bottom: 1px dotted #2563eb; cursor: help; }
    [data-tip]::after {
      content: attr(data-tip);
      position: absolute;
      bottom: 125%;
      left: 0;
      background: #111827;
      color: white;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 13px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
    }
    [data-tip]:hover::after { opacity: 1; }
    p { margin-top: 48px; }
  </style>
</head>
<body>
  <p>Hover <span data-tip="HyperText Markup Language">HTML</span> or
     <span data-tip="Cascading Style Sheets">CSS</span>.</p>
</body>
</html>

hover だけのツールチップは、キーボードやタッチで操作する人には見えません。重要な内容はページにテキストで書くか、要素に tabindex="0" を付けて :focus でも表示しましょう。

カウンターで番号を付ける

CSS カウンターと ::before を使えば、数字を書かずに番号を振れます:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Counters</title>
  <style>
    .steps { counter-reset: step; padding: 0; }
    .steps li { list-style: none; counter-increment: step; margin: 8px 0; }
    .steps li::before {
      content: counter(step);
      display: inline-block;
      width: 24px;
      height: 24px;
      line-height: 24px;
      text-align: center;
      border-radius: 50%;
      background: #2563eb;
      color: white;
      margin-inline-end: 8px;
    }
  </style>
</head>
<body>
  <ol class="steps">
    <li>Write the HTML</li>
    <li>Add the CSS</li>
    <li>Open it in a browser</li>
  </ol>
</body>
</html>

ステップを追加したり削除したりすると、番号は自動で更新されます。

::before と ::after が使えない要素

疑似要素は要素の内側、つまりタグの間に挿入されます。そのための内側を持たない要素には表示できません:

<img>、<video>、<iframe> (置換要素)
<input>、<select>、<textarea> (フォームコントロール) と <br>

チェックボックスや壊れた画像に描画するブラウザもありますが、一貫していません。代わりに囲みの要素に疑似要素を付けます: <span class="field"><input></span> として .field::after をスタイルします。

よくある間違い

content がない。 何も表示されない原因として圧倒的に多いものです。content: "" を追加しましょう。
インラインの疑似要素にサイズを指定する。 display: block、inline-block、position: absolute を指定するまで、width と height は効きません。
状態との順番を間違える。 a:hover::after は動きますが、a::after:hover は動きません。
位置指定された親なしで absolute にする。 疑似要素がどこか遠くの祖先を基準に配置されます。要素に position: relative を追加しましょう。
本当のコンテンツを CSS に書く。 content のテキストは選択もコピーもできません。情報は HTML に書きましょう。

よくある質問

CSS の ::before は何をしますか？

選択した要素の最初の子になる疑似要素を作り、content プロパティで指定したもので中身を埋めます。::after は同じことを最後の子として行います。どちらも HTML には存在しないので、アイコン、ラベル、装飾に便利です。

::before や ::after が表示されないのはなぜですか？

いちばん多い原因は content プロパティがないことです。これがないと疑似要素は生成されません。装飾用の空のボックスには content: "" を使います。ほかには、インラインのままの疑似要素に幅と高さを指定している (display: block か inline-block を指定する)、<img> や <input> のように疑似要素を持てない要素に付けている、といった原因があります。

:before と ::before の違いは何ですか？

動作に違いはありません。コロン 2 つの ::before は疑似要素を示す現在の書き方で、コロン 1 つの :before は CSS2 の古い書き方です。ブラウザは before、after、first-line、first-letter についてはまだ受け付けます。

img や input に ::before は使えますか？

確実には使えません。疑似要素は要素のコンテンツの内側に挿入されますが、<img> などの置換要素や <input> などのフォームコントロールには、そのためのコンテンツボックスがありません。要素を <span> や <div> で囲み、疑似要素はその囲みに付けましょう。

CSS の ::before の内容はスクリーンリーダーで読み上げられますか？

おおむね読み上げられます。content のテキストはふつうアクセシブルな名前に含まれますが、選択やコピーはできません。本当の情報は HTML に書き、疑似要素は装飾や小さな視覚的な手がかりに使いましょう。