CSS の「疑似要素」は、HTML の中に実際には存在しない“仮想的な要素”を作り出し、そこに装飾を加えるための仕組みです。 つまり、見えない補助パーツを追加してデザインを強化するための機能と言えます。
例えば、見出しの前に線を入れたり、リストの前にアイコンを付けたり、文章の最初の1文字だけ大きくしたりといった装飾が可能になります。
疑似要素の基本概念
疑似要素は、HTML に書かれていない要素を「あるものとして扱う」ための CSS の機能です。
通常の HTML 要素では表現しきれない細かな装飾を、CSS だけで実現できます。
疑似要素は主に以下のような場面で使われます。
- 要素の前後に記号や線を追加したい
- 最初の文字だけ大きくしたい
- 選択時の色を変えたい
- 装飾用のパーツを追加したい（アイコン・背景・飾り線など）
このように、デザインの自由度を大きく広げるための機能が疑似要素です。
疑似クラスとの違い
CSS には「疑似クラス」という似た概念がありますが、役割が異なります。
違いについては以下の記事で解説しています。
疑似クラス（例：:hover）
要素の「状態」を表す
→ マウスを乗せた時、クリックした時などの変化を指定する
疑似要素（例：::before）
要素の「一部」や「前後」に仮想的な要素を作る
→ 装飾や補助的なパーツを追加する
初心者が混同しやすいポイントですが、疑似要素は「新しい見えない要素を作る」ものだと覚えると理解しやすくなります。
よく使われる疑似要素とその役割
ここでは、Web制作で頻繁に使われる疑似要素を、それぞれの役割とともに丁寧に解説します。
::before（要素の前に仮想要素を追加）
::before は、対象の要素の「前」に新しい装飾用の要素を作ります。
よく使われる用途は以下の通りです。
- 見出しの左に線を入れる
- リストの前にアイコンを入れる
- ボタンの前に矢印を追加する
::after（要素の後ろに仮想要素を追加）
::after は、対象の要素の「後ろ」に装飾を追加します。
用途としては、
- 見出しの後ろに矢印を付ける
- ボタンの後ろに影や飾りを追加する
- 装飾用の記号を付ける
::first-letter（最初の1文字を装飾）
段落の最初の1文字だけを大きくしたり色を変えたりできます。
雑誌のようなデザインにしたい時に便利です。
::first-line（最初の1行を装飾）
段落の最初の1行だけにスタイルを適用します。
文章の冒頭を強調したい時に使われます。
::selection（文字選択時の色変更）
ユーザーが文字をドラッグして選択した時の背景色や文字色を変更できます。
選択時の視認性を高めるために使われます。
::before と ::after を使う際の重要ポイント
初心者が最初につまずきやすい部分なので、丁寧に解説します。
content プロパティが必須
疑似要素は content がないと表示されません。
文字を入れる場合は "★" のように指定します。
h2::before {
content: "★";
}display を指定しないと幅や高さが効かない
線やボックスを作りたい場合は display: inline-block; や display: block; が必要です。
position を使うと自由度が上がる
装飾を要素の外側に配置したい場合は position: absolute; を使いますが、初心者には少し難しいため、まずは基本の inline-block から始めるのがおすすめです。
疑似要素でできること（具体例）
以下のような効果が得られます。
- 見出しの左に線を入れてデザイン性を高める
- リストの前にアイコンを追加して読みやすくする
- ボタンに矢印や影を付けてクリックを促す
- 文章の最初の文字を大きくして雑誌風にする
- 選択時の色を変えてユーザー体験を向上させる
疑似要素は、サイトの見た目を整えるための「小さな工夫」を実現するための強力なツールです。
初心者がつまずきやすいポイント
- content を指定しないと何も表示されない
- display を指定しないと幅や高さが反映されない
- position を使うと自由度は上がるが難易度も上がる
- 疑似要素はあくまで装飾用であり、構造を変えるものではない
まとめ
CSS の疑似要素は、HTML に存在しない「仮想的な要素」を作り出し、装飾を追加するための機能です。 特に ::before と ::after を使いこなすことで、見出しやリストのデザインを簡単に強化できます。
まずは簡単な見出し装飾から始めて、徐々に応用していくと理解が深まります。
