CSS ::before・::afterの使い方｜疑似要素とcontent

CSS ::before・::afterの使い方とは

::before と ::after は、選んだ要素の中身の前後に、疑似的な要素を作るためのセレクタです。HTMLを書き換えずに、アイコン、装飾線、必須マークなどを足せます。一方で、疑似クラス（:hover :nth-child() など）は「要素の状態を選ぶ」ものなので、役割が違います。

基本（構文・仕組み）

  • ::before は要素の最初の子、::after は最後の子として生成されます。
  • content プロパティが必須です。content が無い、none、normal の場合は生成されません。空にしたいなら content: ""; と書きます。
  • 初期の display は inline です。大きさを付けたい場合は display: block や inline-block、position: absolute を併用します。
  • コロン2つ（::）は疑似要素、1つ（:）は疑似クラス、という区別です。MDN では、古い :before の書き方も受け付けられると説明されています。
  • <img> や <input> のような、中身を持たない置換要素には使えません。
.req::after { content: " *必須"; color: #c00; }

.deco { position: relative; padding-left: 24px; }
.deco::before {
  content: "";
  position: absolute;
  left: 0; top: .35em;
  width: 12px; height: 12px;
  background: #0a58ca;
  border-radius: 50%;
}

サンプルコード（実行結果つき）

<style>
.req::after { content: " *必須"; color: #c00; }
.quote::before { content: "“"; font-size: 2em; color: #888; }
.none::before { content: normal; }
.deco { position: relative; padding-left: 24px; }
.deco::before { content: ""; position: absolute; left: 0; top: .35em; width: 12px; height: 12px; background: #0a58ca; border-radius: 50%; }
li:nth-child(odd) { background: #eef; }
</style>
<label class="req" id="a">お名前</label>
<p class="quote" id="q">引用文</p>
<p class="none" id="n">none</p>
<p class="deco" id="d">装飾つき</p>
<ul><li>1</li><li>2</li><li>3</li></ul>

動作確認（検証環境と結果）

  • 環境: Windows 11 / Microsoft Edge 154（Chromium系、headless）/ getComputedStyle(el, '::after')
  • ファイル: C:Tempks2techtestst2pseudo.html
確認項目 結果
.req::after の content ” *必須”
.quote::before の content ““”
content: normal の ::before content は none（生成されない）
.deco::before の display / width block（absolute 指定による）/ 12px
元の <label> の textContent 「お名前」のまま（疑似要素の文字は DOM に入らない）

疑似要素の文字は DOM に存在しないため、JavaScript で取得できません。

CSS ::before・::afterの使い方の注意点

  • 疑似要素の文字は、コピー・検索・選択が効かないことが多く、スクリーンリーダーの扱いもブラウザや設定で異なります。MDN でも、意味のある内容に使うことは推奨されていません。
  • 必須マークなど意味を持つ情報は、HTML側にテキストや aria-required を用意します。
  • content に画像を指定する場合、alt の代替テキスト指定は対応状況を確認してください。
  • 親に overflow: hidden があると、はみ出した疑似要素は切れます。

CSS ::before・::afterの使い方でよくあるミス

  • content を書き忘れて、表示されない。
  • ::before に幅・高さを付けても反映されない（inline のまま）。
  • <img> に ::before を付ける。
  • 疑似要素をクリックイベントの対象にしようとする（要素本体のイベントとして扱われます）。

ブラウザ対応・バージョン

::before ::after は、すべての主要ブラウザで長く使える機能です。content の alt 付き構文など、新しい指定は MDN で最新の対応状況を確認してください。

CSS ::before・::afterの使い方のチェックリスト

  • content を必ず書いたか（空なら ""）。
  • 装飾目的に限って使っているか。意味のある文字は HTML に書いたか。
  • 配置が必要な場合、親に position: relative を付けたか。
  • :hover などの疑似クラスと、::before の疑似要素を混同していないか。

CSS ::before・::afterの使い方のFAQ（よくある質問）

Q. :before と ::before はどちらを書くべきですか？
A. 現在は ::before が標準です。:before も通常は動きますが、新規では :: を使います。

Q. JavaScript で疑似要素の内容を変えられますか？
A. 直接は操作できません。data-* 属性を content: attr(data-label) で参照する方法がよく使われます。

Q. アイコンフォントの代わりになりますか？
A. 簡単な図形なら可能です。意味のあるアイコンは、SVG と代替テキストを使うほうが安全です。

筆者の見解（CSS ::before・::afterの使い方）

疑似要素は便利な反面、意味を持つ情報を置かないのが基本だと考えます。装飾線、矢印、背景の飾りなど「消えても内容が伝わるもの」に限定すれば、HTMLがすっきりします。テキストを疑似要素に入れる場合は、スクリーンリーダーでの読み上げも一度確認してください。

CSS ::before・::afterの使い方の関連項目

出典（一次情報）

タイトルとURLをコピーしました