CSS 疑似要素 beforeとafterの使い方と実例サンプル

CSSの疑似要素について詳しく解説します。
疑似要素の中でも、beforeとafterは、Webデザインにおいて利用頻度が高く、とても便利なCSSです。
疑似要素を使いこなすことで、Webサイトの幅広いデザイン表現ができるようになります。

CSSの疑似要素とは？

擬似要素 (pseudo-elements) は、HTML要素の特定部分を装飾デザインするときに使えるCSSです。
疑似要素を使うと、CSSでテキストや画像素材を表示したり、装飾などを実装することができます。

疑似要素には、いくつか種類があります。

実際のところ、Web開発でよく使う疑似要素は、「before」と「after」です。
まずは、「before」と「after」の使い方をしっかりマスターしましょう。

beforeとafterの使い方・書き方

疑似要素の基本的な書き方を解説します。
書き方はとてもシンプルで簡単です。

CSSでセレクタの後に「::」ダブルコロンにつなげて疑似要素を記述します。
ちなみに、擬似クラスの場合は「:」シングルコロンでつなげますので書き方を間違えないようにしましょう。
疑似要素と疑似クラスの違いは、後述しますので興味のある方はご覧ください。

セレクタ::疑似要素 {
  プロパティ: 値;
}

疑似要素のbeforeとafterを使う場合は、このように書くことができます。
（例）h1要素、p要素、任意のクラス要素、任意のID要素

h1::before {
  /* h1要素の直前に適用するスタイルを記述 */
}

p::after {
  /* p要素の直後に適用するスタイルを記述 */
}

.title::before {
  /* クラス要素 .titleの直前に適用するスタイルを記述 */
}

#title::after {
  /* ID要素 #titleの直後に適用するスタイルを記述 */
}

基本的な書き方がわかったところで、次はプロパティと値について解説していきます。

疑似要素の基本 content プロパティ

疑似要素にcontentプロパティを指定することで、contentに記述した内容をWebページ上に表示することができます。

セレクタ::before{
    content: '表示する内容';
}

セレクタ::after{
    content: '表示する内容';
}

表示する内容が文字列の場合は、ダブルクォーテーション「” “」または、シングルクォーテーション「’ ‘」で文字列を囲みます。

"文字列"

'文字列'

ダブルクォテーションとシングルクォーテーションは、どちらを使っても構いません。

疑似要素で文字列を表示する方法

例えば、pタグで囲った文章の直後に「New」という飾り文字を表示させる場合は、このように書きます。

<p>テキストが入ります。</p>

この時点で、HTMLには「New」という飾り文字は、記述していませんが、CSS側の疑似要素のcontentプロパティで指定してみます。

p::after {
    content: 'New';
    font-weight: bold; /* 太文字指定 */
}

Webブラウザで見てみると、下記のように「テキストが入ります。」の後に、太文字の「New」を表示できます。

例では、太文字を指定しましたが、色やフォントサイズなどを指定することができます。

contentプロパティで使えるコンテンツは、文字列以外にもあります。

疑似要素で画像素材を表示する方法

p要素の直前にアイコンなどの画像素材を表示させる場合は、contentプロパティにurl('画像のパス')を指定して、画像を保存している場所のパスを記述します。
パスは、相対パス・絶対パスのどちらも使うことができます。
また、url( )内の引用符は、ダブルクォテーションとシングルクォーテーションが使えるほか、省略することもできます。

例として、h2タグのタイトル名の前に画像素材を表示してみましょう。

<h2>タイトルサンプル</h2>

CSSは、このように書きます。画像パスは例として、title-image.png を使う想定とします。

h2::before {
    content: url(../images/title-image.png);
}

Webブラウザで見てみると、下記のようにタイトルの前に、画像title-image.pngを表示できます。

利用する画像によっては、サイズや配置位置の調整は必要ですが、方法は後ほど説明します。

疑似要素で連番を表示する方法

疑似要素を使って、箇条書きli要素の頭に連番を付けてみましょう。
連番を表示するために、対象となるli要素に、ounter-increment（カウンター・インクリメント）プロパティを使います。ounter-incrementの値には、任意の名前を付けます。
そのうえで、疑似要素にcounter(任意の名前)を指定します。
例では、任意の名前を「number」とします。

<ul>
  <li>テキストが入ります。</li>
  <li>テキストが入ります。</li>
  <li>テキストが入ります。</li>
  <li>テキストが入ります。</li>
  <li>テキストが入ります。</li>
</ul>

HTMLには番号を記述していませんが、CSS側でカウンターインクリメントを使用し、疑似要素のcontentプロパティで指定しています。

li {
  counter-increment: number;
}

li::before {
  content: counter(number);
  margin-right: 5px; /* 番号の右に5pxのスペース */
  font-weight: bold; /* 太文字指定 */
}

Webブラウザで見てみると、下記のように「テキストが入ります。」の頭に、連番が自動で表示できます。

連番は、HTMLの順序ありリストであるolタグでつくることもできますが、数字にオリジナルのデザインを施したいときや、SEOの構造で順序なしリストulタグで連番を付けたい場合に使える疑似要素です。

疑似要素で引用符を表示する方法

疑似要素を使って、引用符を付けることができます。
引用符を表示するために、対象となる要素に、quotes（クォート）プロパティを使います。quotesの値には、ダブルクォーテーションまたは、シングルクォーテーションで、文頭と文末に付けたい引用符を囲います。

quotes: '文頭の引用符''文末の引用符';

そのうえで、疑似要素beforeにopen-quoteを、afterにはclose-quoteを指定します。
例では、わかりやすいようにHTMLの<q>インライン引用要素を使って、疑似要素で引用符を表示する想定とします。spanタグやclass名を用いても構いません。

<p><q>テキストが入ります。</q></p>

CSSでは、このように書きます。

q {
  quotes: '「''」';
}

q::before {
  content: open-quote;
}
q::after {
  content: close-quote;
}

Webブラウザで見てみると、「 」で括った引用符を表示できます。

次に、引用符の中で引用符を使いたい場合は、quotesの値に2種類の引用符を連続で記述します。
1番目の組み合わせが外側、2番目の組み合わせが内側の引用符に該当します。

quotes: '文頭の引用符''文末の引用符''文頭の引用符''文末の引用符';

<p><q>テキストの中に<q>引用符</q>が入ります。</q></p>

CSSでは、このように書きます。

q {
  quotes: '「''」' '＜''＞';
}

q::before {
  content: open-quote;
}
q::after {
  content: close-quote;
}

Webブラウザで見てみると、「 」で括った引用符の中で、< >の引用符を表示できます。

疑似要素でhref属性・title属性・data属性の内容を表示する方法

疑似要素を使って、href属性・title属性・data属性の内容を表示することができます。
contentプロパティの値に、attr(属性名)を使います。

href属性の使用例

href属性を疑似要素で表示する場合は、attr(href)を使います。
例として、aタグで設定したリンク先のURLを疑似要素で表示してみましょう。

<p class="link"><a href="https://leqturez.jp">URLはこちら</a></p>

content値のattr(href)は、シングルクォーテーションまたは、ダブルクォーテーションで二重で囲います。

.link a::after {
  content: ' 'attr(href)' ';
}

Webブラウザで見てみると、テキストの直後にhrefで指定したURLを表示できます。

title属性の使用例

title属性を疑似要素で表示する場合は、attr(title)を使います。
例として、aタグのtitle属性に設定したテキストを画像素材の直後に、疑似要素で表示してみましょう。

<p class="navi-top">
  <a href="https://leqturez.jp" title="トップページ">
    <img src="/images/i-home.png">
  </a>
</p>

CSSでは、このように書きます。

.navi-top {
	text-align: center;
}
.navi-top a::after {
	content: attr(title);
	display: block;
}

Webブラウザで見てみると、画像の直後にtitle属性で指定したテキストを表示できます。
画像とテキストの切替表示などで活用することもできます。

data属性の使用例

data属性を疑似要素で表示する場合は、attr(data属性名)を使います。
例として、liタグのリストにdata属性で日付を記述して、テキストの直前に日付を表示してみましょう。

<ul class="information">
  <li data-date="2025.03.01">お知らせ</li>
  <li data-date="2025.02.01">お知らせ</li>
  <li data-date="2025.01.01">お知らせ</li>
</ul>

CSSでは、このように書きます。

.information li::before {
	content: attr(data-date);
	margin-right:10px;
}

Webブラウザで見てみると、リストで作成したテキストの直前にdata属性で指定した日付を表示できます。

このように、疑似要素のcontentプロパティで使える値はいくつかありますが、はじめは、文字と画像素材の表示の仕方を覚えておくだけでもCSSデザインの幅が広がります。

beforeとafterの実例サンプル

疑似要素は、HTML/CSSのコーディングでは頻繁に使用します。
こんなときに使える例として、いくつかサンプルを紹介します。

CSS 見出しデザイン

テキストの両端に斜線でアクセントを付けた見出しのデザインです。

HTMLのpタグに任意のクラス.title_sampleを付けています。

<p class="title_sample">見出しデザインサンプル</p>

CSSでは、疑似クラスのbeforeとafterを使って、テキストの前後に斜線を配置しています。

.title_sample {
  position: relative;
  display: inline-block;
  padding: 0 42px;
  font-size:20px;
  font-weight:700;
}
.title_sample::before,
.title_sample::after {
  content: '';
  position: absolute;
  top: 50%;
  display: inline-block;
  width: 40px; /* 斜線の長さ */
  height: 2px; /* 斜線の幅 */
  background: #999999; /* 斜線の色 */
}
.title_sample::before {
  left:0;
  transform: rotate(60deg); /* 斜線の角度 */
}
.title_sample::after {
  right: 0;
  transform: rotate(-60deg); /* 斜線の角度 */
}

CSS リストデザイン

olリストの番号にオリジナルのデザインを加えた例です。

HTMLのolタグに任意のクラス.list_sampleを付けています。

<ol class="list_sample">
  <li>リストサンプル</li>
  <li>リストサンプル</li>
  <li>リストサンプル</li>
</ol>

CSSでは、疑似クラスのbeforeを使って、番号にスクエアの背景色を付けています。

.ex_list_sample {
  counter-reset: number; /* olの数字を初期化 */
  list-style: none;
  margin: 0;
  padding: 0;
}

.ex_list_sample li {
  counter-increment: number; /* 連番を付ける */
  position: relative;
  padding: 0 0 0 30px;
  font-size: 16px;
  line-height: 1.5;
}

.ex_list_sample li:not(:first-child) {
  margin-top: 10px; /* 疑似クラスで1番目以外のリストの上に空間 */
}

.ex_list_sample li::before {
  content: counter(number);
  position: absolute;
  top: 0;
  left: 0;
  display: inline-block;
  background: #000; /* 番号の背景色 */
  font-size:15px;
  color: #fff; 
  width: 25px; /* 番号の背景幅 */
  height: 25px; /* 番号の背景高さ */
  line-height: 25px; /* 番号を背景の上下中央に配置 */
  text-align: center; /* 番号を背景の左右中央に配置 */
}

CSS ボタンデザイン

疑似要素を使ってCSSだけで作成したボタンデザインです。

HTMLのaタグに任意のクラス.btn_sampleを付けています。

<a href="#" class="btn_sample">ボタンサンプル</a>

CSSでは、疑似要素のafterを使って、テキストの後に矢印を配置しています。

.btn_sample{
  position: relative;
  display:inline-block;
  padding: 15px 50px;
  color: #fff;
  text-decoration: none;
  font-size: 18px;
  font-weight:700;
  border-radius:50vh;
  background: #099;
  transition: 0.5s; /* マウスホバーのスピード */
}
.btn_sample::after{
  content:'';
  position: absolute;
  top:50%;
  right:20px;
  width: 8px;
  height: 8px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: translate(0, -50%) rotate(45deg); /* 上下の中央配置と矢印の角度調整*/
}
.btn_sample:hover {
  opacity: 0.7; /* マウスホバー時の透過度 */
}

参考までに、矢印の上下中央の配置について、簡単に解説しておきます。
まずtop:50%で矢印の左上の部分をボタン要素の上下中央の位置に配置します。
次に、transformでtranslate(0, -50%)またはtranslateY(-50%)とすると矢印の半分の位置までマイナス方向（上方向）に50%移動します。
結果として、ボタン要素のちょうど上下中央の位置に矢印を配置することができます。
上下中央配置の方法として、translate(X軸方向, Y軸方向)は、よく使うテクニックなので覚えておくと便利です。

CSS 背景画像デザイン

疑似要素を使って、背景画像をテキストの先頭に配置したサンプルです。

contentプロパティに直接画像を設定しても良いのですが、画像のサイズ調整がやや面倒です。そんなときは、疑似要素に背景画像を設定する方法が簡単です。

HTMLのpタグに任意のクラス.title_bg_sampleを付けています。画像は縦横128pxの素材を用いています。

<p class="title_bg_sample">背景画像アイコン</p>

CSSでは、疑似要素のbeforeを使って、背景画像を設定しています。

.title_bg_sample::before {
  content: ''; /* 空設定 */
  display: inline-block;
  width: 50px; /* 画像表示の幅 */
  height: 50px; /* 画像表示の高さ */
  background: url(../images/i-display.png) no-repeat; /* 画像のパスと繰り返しなし*/
  background-size: contain;
  margin-right: 8px;
  vertical-align: middle; /* 上下中央配置 */
}

contentの値は、空にしたうえで、backgroundプロパティで背景画像のパスを指定します。
background-sizeプロパティに、containを指定することで、画像を表示するエリアが拡大・縮小されます。
画像を表示するエリアは、width、heightで調整することができるため、レスポンシブ対応も可能です。
配置調整は、Flexboxを利用する方法もありますが、シンプルな構成であれば、この方法でも十分です。

CSS ラベルデザイン

疑似要素でラベル風のデザイン例です。

HTMLのpタグに任意のクラス.label_sampleを付けています。

<p class="label_sample">ラベルサンプル</p>

CSSでは、疑似要素のbeforeを使って、左上の角にラベル部分を配置しています。

.label_sample {
  position: relative;
  padding: 2em;
  background: #999;
}

.label_sample::before {
  position: absolute;
  content: 'ラベル'; /* 表示テキスト */
  top: 0;
  left: 0;
  font-size: 14px;
  line-height: 1;
  color: #fff; /* ラベルのテキスト色*/
  padding: 5px;
  background: #000; /* ラベルの背景色 */
}

この方法を使って、画像の上にラベルや装飾文字を重ねることもできます。

CSS 吹き出しデザイン

疑似要素を使った吹き出し風デザインです。

HTMLのpタグに任意のクラス.bubble_sampleを付けています。

<p class="bubble_sample">吹き出しサンプル</p>

CSSでは、疑似要素のbeforeを使って、吹き出しの矢印部分を生成しています。

.bubble_sample {
  position: relative;
  background: #ffcc00; /* 吹き出しの背景色 */
  width: 100%; /* 吹き出しの幅 */
  border-radius: 10px; /* 吹き出しの角丸 */
  margin: 0 auto;
  padding: 20px;
  text-align: center;
}
.bubble_sample::before {
  content: '';
  position: absolute; 
  /* 吹き出しの矢印 */
  border: 15px solid transparent;
  border-top: 15px solid #ffcc00;
  /* 吹き出しの矢印の位置 */
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
}

吹き出しの形や、矢印の位置・サイズを変更して、さまざまなデザインをつくることができます。

ここで紹介した疑似要素デザインは、ほんの一部ですが、beforeとafterを使って、いろいろなCSSのデザインパーツを制作できることがわかります。

疑似要素で気をつけておくべきこと

疑似要素は、HTMLに影響を与えない状態で、CSSのみで装飾デザインを作成することができます。
つまり、疑似要素で表示した内容は、検索サイトにコンテンツとして認識されません。
したがって、SEO対策のために、重要なワードやコンテンツ要素を疑似要素で表現しないのが基本となります。
あくまでも、デザインとしての装飾やテキストを施す目的で、疑似要素を利用するほうがいいでしょう。

疑似要素と疑似クラスの違い

疑似要素と疑似クラスの大きな違いは、まずCSSの書き方です。
疑似要素は、セレクタの後が「::」ダブルコロンでつなげるのに対し、疑似クラスは「:」シングルコロンを使います。

/* 疑似要素の書き方 */
セレクタ::疑似要素 {
  プロパティ: 値;
}

/* 疑似クラスの書き方 */
セレクタ:疑似要素 {
  プロパティ: 値;
}

次に、影響を与える範囲の違いです。
疑似要素は、影響を与える対象が、指定した要素の中の一部です。
疑似クラスは、影響を与える対象が、指定した要素全体になります。

疑似クラスの例を挙げると、マウスホバーのスタイル指定や、n番目のスタイル指定などでよく使います。

/* マウスをのせたときに青色に変わるテキストリンク */
a:hover {
  color: blue;
}

/* リストの1番目のみ青色 */
ul li:first-child {
  color: blue;
}

上記の例だと、影響を与える範囲が、aタグやliタグで囲った全体が対象になっていることがわかります。

まとめ

疑似要素のbeforeとafterを使いこなせるようになると、HTMLコードもスッキリ書くことができ、CSSのバリエーションも増えデザインの幅が広がります。
HTMLタグにクラス属性を使うことで、ピンポイントでいろいろな部分に使えるので、ぜひ試してみてください。