CSSの::before・::afterセレクター徹底解説！実践的な使い方ガイド

CSSの::beforeセレクターは、選択した要素の前にコンテンツを挿入します。一方、::afterセレクターは、指定した要素の後にコンテンツを挿入します。これらのセレクターは、段落やリンクの前後にテキストを追加する際によく使われます。

Webサイトをデザインしていると、要素のコンテンツの前後に何かを追加したい場面が出てきます。たとえば、リストの各箇条書きの先頭に画像を表示させたい場合などがその一例です。

そんなときに役立つのが、CSSの::beforeと::afterという擬似要素です。これらの擬似要素を使えば、要素のコンテンツの前や後に自由にコンテンツを挿入できます。

この記事では、具体的なコード例を交えながら、::beforeと::after擬似要素を使ってWebページのコンテンツを装飾する方法を解説します。読み終える頃には、プロのようにこれらの擬似要素を使いこなせるようになっているでしょう。

CSSの擬似要素（Pseudo-Elements）とは

擬似要素とは、CSSセレクターで選択した要素の特定の部分にスタイルを適用できる特別なキーワードです。本記事では、すべての擬似要素がセレクターとして機能することから、「セレクター」という呼び方で統一して説明します。

擬似要素は、HTML側にクラスやIDを追加することなく、特定の要素にスタイルを適用したい場合に便利です。たとえば、ページ内のすべてのリンクの後ろに「>」の矢印を付けたいとき、擬似要素を使えば簡単に実現できます。

CSSにはさまざまな擬似要素が用意されています。代表的なものとしては、::first-line、::first-letter、::before、::afterなどがあります。この記事では、その中でも特に使用頻度の高い::beforeと::afterの2つに焦点を当てて解説します。

擬似要素は通常、コロン2つ（::）で表記します。CSS3ではコロン1つ（:）の構文もサポートされていますが、ベストプラクティスとしてはコロン2つの表記が推奨されます。

これは、コロン2つの表記によって、擬似クラス（pseudo-class）と擬似要素（pseudo-element）を明確に区別できるようにするためです。

CSS ::before擬似要素の基本

::before擬似要素は、Webページ上の要素の前に表示されるコンテンツを追加します。多くの場合、段落の前にテキストを加えるといった用途で使われます。

::before擬似要素の構文は以下のとおりです。

selector::before {
  /* CSSルール */
}

::beforeセレクターは、スタイルを適用したい要素名の後ろに記述します。

::before擬似要素を構成する主な要素は次のとおりです。

• selector（セレクター）：::beforeを適用する対象のセレクターです。すべての「a」タグに適用したい場合は「a」、クラス名「link」を持つすべての要素に適用したい場合は「.link」と指定します。
• ::before：ブラウザーに対し、指定したセレクターの前にCSSルールの内容を挿入するよう指示します。
• CSSルール：セレクターの前に適用される実際のスタイル定義です。

CSSセレクターの仕組みについてさらに詳しく知りたい方は、CSSセレクターに関するガイドもあわせてご覧ください。

それでは、::before擬似要素の動作を理解するために、実際の例を見ていきましょう。

::beforeの使用例

たとえば、サンプルページ上のすべてのリンクの前にリンク絵文字（🔗）を表示したいとします。この処理は、次のようなコードで実現できます。

このコードの表示結果：

HTMLファイルでは、外部サイトのホームページへリンクする<a>タグを定義しています。そしてCSSファイルでは、::before擬似要素を使って、ページ内のすべての<a>タグの前にリンク絵文字を追加しました。

具体的には、CSSファイルでcontentプロパティを次のように指定しています。

content: "🔗";

このルールにより、作成した<a>タグの先頭にリンク絵文字が表示されるようになりました。

contentプロパティには、次のような値を指定できます。

• 文字列：「これは文字列です。」など
• カウンター：「counter(li);」など
• 画像：「url(/path/to/image.png)」など
• 空文字列：「""」など

なお、content属性にHTML要素を挿入することはできませんので注意してください。

CSS ::after擬似要素の基本

::after擬似要素は、Webページ上の要素の直後にコンテンツを追加します。::beforeセレクターと同様に、リンクや段落テキストと組み合わせて使われることが多い擬似要素です。

::after擬似要素の構文は以下のとおりです。

selector::after {
  /* CSSルール */
}

::afterの構文は::beforeとまったく同じで、content属性に指定できる値も先ほど説明したものと共通しています。

::afterの使用例

ここでは、「Hansons Bakery」というパン屋さんのWebサイト向けにリンク要素をデザインするとします。このリンクには「Hansons Bakeryのホームページへ」というテキストを表示し、周囲には幅1pxの黒い実線ボーダーを付けます。

さらに、ラベルの後ろには「こちらのページでは焼き菓子のメニューをご紹介しています。」（冒頭に半角スペースがある点に注目）という内容のテキストボックスを表示し、背景色はオレンジ色にします。

この処理は、次のコードで実現できます。

index.html
<a href="/" class="label">Hansons Bakeryのホームページへ</a>

styles.css
.label {
  border: 1px solid black;
}
.label::after {
  content: " こちらのページでは焼き菓子のメニューをご紹介しています。";
  background-color: orange;
}

このコードの表示結果：

コードの内容を見ていきましょう。まずHTMLファイルで、<a>タグを使ってホームページへのリンクを定義しています。このリンクには.labelというクラス名を付けています。

CSSファイルではまず、クラス名.labelを持つすべての要素に対して、幅1pxの黒い実線ボーダーを適用しています。

続いて、::afterセレクターを使って、先ほど説明したテキストボックスを作成しました。このボックスには「こちらのページでは焼き菓子のメニューをご紹介しています。」というテキストが表示され、オレンジ色の背景が設定されています。

まとめ

::beforeと::after擬似要素を使うと、CSSルールで選択した要素の特定の位置にコンテンツを追加できます。たとえば、::beforeセレクターでリンクの前にテキストを追加したり、::afterセレクターで段落の後ろに絵文字を追加したりすることが可能です。

この記事では、具体例を交えながら、CSSにおける擬似要素の基礎知識と、::beforeおよび::after擬似要素の使い方を解説しました。これであなたも、プロのWebデザイナーのように::beforeと::after擬似要素を活用できるはずです。