【CSS】擬似要素（::before、::after）とは？

はじめに

CSSについて勉強した内容を備忘録として整理します。今回は、擬似要素について勉強しました。

擬似要素とは

擬似要素は、HTMLに実際には存在しない要素をCSSだけで作り出してスタイルを当てる仕組みです。

• 特定の要素の中や前後に仮想的な要素を追加できる
• デザインのために余計なHTMLを書かずに済む

::beforeと::after

::beforeと::afterは特によく使われる擬似要素です。

• ::before：指定した要素の先頭に挿入
• ::after：指定した要素の末尾に挿入

※使うときは必ず content プロパティが必要（文字を表示しない場合は空文字を設定する）

使用パターン

• 飾り文字（アイコン、記号）
• リストのマークカスタマイズ
• バッジやラベルの追加
• デザイン用の小さな装飾
• フォームに「必須マーク（*）」を付ける

使用例

p::before {
  content: "★ ";
}

p::after {
  content: " ✔";
}

<p>今日のタスク</p>

表示イメージ

★ 今日のタスク ✔

開発者ツールで確認するとこのように要素が出力されています。

<p>
  ::before
  今日のタスク
  ::after
</p>

その他の擬似要素

擬似要素	役割・追加される場所	主な用途・特徴
::first-letter	要素内の最初の1文字にスタイルを適用	雑誌風の大きな頭文字デザイン（ドロップキャップ）
::first-line	要素内の最初の1行にスタイルを適用	記事の冒頭行を目立たせる
::selection	ユーザーがテキスト選択したときのスタイル	選択範囲の背景色や文字色を変える
::placeholder	<input>や<textarea>のプレースホルダー文字にスタイルを適用	フォームの入力ガイドテキストをカスタマイズ
::marker	リスト（<ul>, <ol>）のマーカーにスタイルを適用	リストマークの色や形を変える
::backdrop	<dialog>要素の背後の背景にスタイルを適用	ダイアログの後ろを暗くする、ぼかす

おわりに

擬似要素について理解できました。::beforeと::after以外の擬似要素についても理解を深めて使えるようにしていきたいです。