【初心者向け】CSS疑似要素 ::before と ::after｜基本と応用をわかりやすく解説

プログラミング

公開日: 2026/01/26

【初心者向け】CSS疑似要素 ::before と ::after｜基本と応用をわかりやすく解説

※この記事にはプロモーションを含みます

はじめに

CSS の ::before と::after は、HTML のタグを増やさずに装飾や補助要素を追加できる疑似要素 です。
ボタンの装飾や見出しのデザイン調整、アニメーション効果まで幅広く活用することができます。

ただし、初めて使う場合はcontent プロパティや position の設定、ブラウザ互換性などでつまずきやすいポイントもあります。

本記事では、疑似要素の基本から具体的な活用例、トラブル対処までを丁寧に解説します。

::before / ::after の基本

疑似要素とは何か

疑似要素とは、HTML に直接要素を追加せずにスタイルで装飾や構造を付加できる要素のことです。

代表的な疑似要素として ::before と ::after があり、コンテンツの前後に装飾用の要素を挿入できます。

基本的な書き方と必須プロパティ

疑似要素は通常の CSS セレクタに続けて ::before または ::after を記述します。
擬似要素で設定すべきプロパティは主に以下です。

content：表示する文字列や空の内容を指定
display：要素の表示形式（block, inline-block など）
position：配置調整のために使用（absolute / relative 等）

例えば、見出しの前にアイコンを追加する場合は下記のように記述します。

<h2>タイトル</h2>

h2::before {
  content: "★";
  display: inline-block;
  margin-right: 5px;
}

疑似要素の見え方1

このコードでは、h2 要素の前に ★ マークを追加しています。

content を忘れると表示されないため、必ず指定する必要があります。

content プロパティの役割

content は疑似要素に表示する内容を指定するプロパティです。

空文字「” ”」 を指定すると、装飾のボックスとして利用可能です。例えば、ボタンの下線やアイコンなど、内容はなくデザインだけを追加したい場合に便利です。

レイアウト調整での使い方

装飾的なボーダー・アイコンの追加

疑似要素を使うと、HTML タグを増やさずに装飾要素を追加できます。

以下の例では、ボタンの下に線を追加しています。

<button>ボタン</button>

button::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  background: #333;
  margin-top: 5px;
}

疑似要素の見え方2

このように装飾用のボックスを疑似要素で作成すると、ボタンの視覚的アクセントが簡単に増やせます。

スペース調整と位置合わせのコツ

疑似要素を適切に配置するには、position や display、margin/padding の調整が重要です。基本の考え方は以下の通りです。

調整方法	内容
position	relative / absolute を組み合わせて自由に配置
display	block / inline-block で高さ・幅を調整
spacing	margin / padding を調整して要素同士の間隔を最適化

これにより、複雑なレイアウトでも思い通りに装飾を配置できます。

実用的な UI 装飾例

ボタンや見出しのスタイル例

ボタンの前後に装飾を入れることで、視覚的なアクセントをつけられます。

例えばボタンの先頭に矢印を表示する例です。

<button>ボタン</button>

button::before {
  content: "→";
  display: block;
  margin-right: 5px;
}

疑似要素の見え方3

このように矢印を追加するだけで、CTA ボタンが目立ちます。

連続する要素への適用テクニック

リストやカードなど連続する要素でも疑似要素は有効です。

nth-child などと組み合わせると、パターン装飾が可能です。

nth-child は親要素の中で何番目の子要素にスタイルを適用するかを指定できる擬似クラスです。

これを ::before / ::after と組み合わせることで、連続する要素にパターン化された装飾を追加できます。

例えば、奇数行に ★ を、偶数行に ☆ を付けることができます。

<ul>
  <li>項目1</li>
  <li>項目2</li>
  <li>項目3</li>
  <li>項目4</li>
</ul>

ul li:nth-child(odd)::before {
  content: "★";
  color: gold;
  margin-right: 5px;
}

ul li:nth-child(even)::before {
  content: "☆";
  color: silver;
  margin-right: 5px;
}

疑似要素の見え方4

nth-child の使い方

nth-child は、リストやカードなど繰り返し要素に対してパターン化された装飾を行いたい場合に非常に便利な擬似クラスです。

要素のクラスを個別に付けなくても、順番だけを基準にスタイルを切り替えられるため、HTML 構造をシンプルに保てます。

基本的な指定方法には、以下のようなパターンがあります。

指定方法	適用される要素
nth-child(odd)	奇数番目の要素（1・3・5 番目…）に適用
nth-child(even)	偶数番目の要素（2・4・6 番目…）に適用
nth-child(3)	3 番目の要素のみに適用
nth-child(3n)	3 の倍数番目の要素（3・6・9 番目…）に適用

これらを ::before や ::after と組み合わせることで、行ごとのアイコン切り替え・背景の交互配色・番号装飾 など、実務でもよく使われる UI 表現を CSS だけで実現できます。

トランジションやアニメーションへの応用

疑似要素にtransition や animation を適用すれば、動きのある装飾も可能です。

<h2>タイトル</h2>

h2::after {
  content: "";
  display: block;
  width: 0;
  height: 2px;
  background: #f00;
  transition: width 0.3s;
}

h2:hover::after {
  width: 100%;
}

疑似要素の見え方5

ホバー時に下線がスムーズに伸びる効果を付けられます。

よくあるトラブル

よくあるレイアウト崩れの原因と対策

疑似要素の使用時によく起こるトラブルは以下のケースが多いです。

content を設定していない

→ 表示されない

display や position の不一致

→ レイアウト崩れ

重ね順(z-index)の指定不足

→ 背景に隠れる

これらに事前に注意してコーディングすることで、予期せぬ崩れを防止できます。

ブラウザ互換性とフォールバック

CSS の ::before / ::after 疑似要素はほとんどのブラウザでサポートされていますが、古いブラウザ（特に Internet Explorer 11 以前）では一部の機能が正しく表示されない場合があります。

そのため、必要に応じて JavaScript を使った代替処理や、追加の HTML 要素を用意してフォールバック対応を行うことが必要になります。

こうした対応を行うことで、どのブラウザでも安定したデザイン表示を実現できます。

まとめ

CSS の ::before と ::after は、HTML を増やさずに装飾を追加できる便利な手段です。

初心者でも基本的なプロパティやコード例を理解すれば、ボタンや見出し、カードなど様々な UI 装飾に応用が可能です。

疑似要素を活用する際は、content の指定・display・position の調整・ブラウザ互換性に注意し、表示崩れやトラブルを防ぎましょう。

こうしたHTML/CSS の基礎を始めとする Web 制作を学びたい方には、WEBMASTERS がおすすめです。
Web 制作に必要な基礎知識と実践が効率よく身につくため、学習効率が大幅に向上します。
学習環境や教材が充実しており、独学ではつまずきやすいポイントも現役エンジニアがしっかりサポートしてくれます。

この記事を
シェアする！