【CSS】before擬似要素とafter擬似要素の使い方・注意点を解説【サンプル有】

今回は、::beforeと::afterという擬似要素について解説します。

擬似要素を使うことで、HTMLに直接コードを書かなくても、見た目を変えたり、装飾をすることができます。

この記事では、基本的な使い方からサンプルコードまで、わかりやすく解説していきます。

それでは始めます。

擬似要素とは？

MDNのサイトによると、以下のように解説されています。

CSS の 擬似要素 (Pseudo-elements) は、セレクターに付加するキーワードで、選択された要素の特定の部分にスタイル付けできるようにするものです。

https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements

選択された要素の特定の部分とは

選択された要素の特定の部分とは、わかりにくいので解説します。

例えば、::first-letterという擬似要素があります。

こちらをpタグに適用した場合です。

以下のコードを見てください。

<p>鮮やかな朝日の光が…</p>

p::first-letter {
  font-size: 2rem;
  font-weight: bold;
  color: red;
}

::first-letterは、最初の行の最初の文字にスタイルを適用する擬似要素です。

つまり、上記例（::first-letter）での選択された要素の特定の部分とは、最初の1文字分にあたります。

上記CSSを適用したら以下の画像のように表示されます。

color: red;が文章全体には適用されていないかと思います。（最初の1文字分に適用）

::first-letterは最初の行の最初の文字にスタイルを適用しますが、擬似要素を使わなかったら鮮をspanタグで囲みclassをつけるなどの方法をとりますよね。

以下のようなコードです。

<p><span class="first_letter">鮮</span>やかな朝日の光が…

それを擬似要素を使ったら、装飾用のHTMLを増やさずに選択された要素の特定の部分にスタイルをあてることができます。

擬似要素は他にもある

擬似要素には::first-letter、::before、::after以外もあります。

参考サイト：

https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements#%E6%93%AC%E4%BC%BC%E8%A6%81%E7%B4%A0%E3%81%AE%E4%B8%80%E8%A6%A7

::beforeと::afterとは

では実際にコードを見てみましょう。以下のサンプル文章はChatGPTに考えてもらいました。

<p>
  鮮やかな朝日の光が窓辺に差し込み、部屋全体を温かい金色に包み込みます。外では、小鳥たちがさえずりながら新しい一日の始まりを告げ、風がそよ風となって木々を揺らしています。こうした自然の営みが、日常に彩りと静かな感動をもたらす瞬間です。
</p>

p::before {
  content: "※ ";
  color: red;
}

この例では、content: プロパティの※が先頭に追加されます。（詳細は後述）

上記コードを書くと以下のような表示になります。

ブラウザのデベロッパーツールで見ると、以下のように::before擬似要素が挿入されています。

ではこちらもコードを見てみましょう。今度は文字色を青にしました。

<p>
  鮮やかな朝日の光が窓辺に差し込み、部屋全体を温かい金色に包み込みます。外では、小鳥たちがさえずりながら新しい一日の始まりを告げ、風がそよ風となって木々を揺らしています。こうした自然の営みが、日常に彩りと静かな感動をもたらす瞬間です。
</p>

p::after {
  content: " ※";
  color: blue;
}

上記コードを書くと以下のような表示になります。

ブラウザのデベロッパーツールで見ると、以下のように::after擬似要素が挿入されています。

::before擬似要素と::after擬似要素の基本的な使い方

::beforeと::afterの基本的な使い方を解説します。

::before擬似要素と::after擬似要素の書き方

次は、::before擬似要素と::after擬似要素の書き方についてです。

ポイントとしては、

例えば先ほどの例のように以下のように書きます。

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

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

contentプロパティ

::beforeや::afterを利用する際は、必ずcontentプロパティを指定する必要があります。

これがないと、何も表示されません。

先ほどのコードをもう一度貼ります。

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

content: ” ※”;の箇所に注目してください。

contentプロパティに設定されている ※が::before擬似要素として表示されます。

contentプロパティの書き方

contentプロパティは“と“の間に挿入したい文字列を指定します。

contentプロパティは空の文字列でもOK

content: “” のように空の文字列を指定することもできます。

文字列を表示しないで、擬似要素で装飾だけを行いたいときに使えます。

例えば、線を引くなどの装飾だけが必要な場合に空の文字列を使用します。

例えば以下は、h2タグの左右に線を引くデザインのコードです。

<h2>
  contentプロパティは空の文字列でもOK
</h2>  

h2::before,
h2::after {
  content: "";
  display: inline-block;
  width: 10%;
  height: 2px;
  background-color: #000000;
  vertical-align: middle;
}

上記コードでは、 contentプロパティが空（””）になっています。

ですので、先ほどの例（”※ “）のように何か文字列を表示するのではなく、::beforeと::afterを装飾のみのために使用しています。

簡単にコードを解説すると、

このように、contentプロパティは空の文字列も設定できます。

空の文字列とスペースは違う

空の文字列（””）とスペース（” “）は似たように見えます。

空の文字列（””）を使用したければ、” （ダブルクォーテーション）と” （ダブルクォーテーション）の間にスペースを挿入しないようにしましょう。

空白が挿入されますので、コードによっては幅ができることがあります。

::before擬似要素と::after擬似要素を使う時の注意点

次に、::before擬似要素と::after擬似要素を使う時の注意点です。（擬似要素全般にも言えます。）

1つのセレクタには1つの擬似要素しか使えない

1つのセレクタに追加できる擬似要素は1つだけということです。

例えば、同じセレクタ内で ::before と ::after を同時に使うことはできません。

また、::first-line や ::first-letter なども同じです。

例えば以下のコードは間違った記述です。

p::before::after {
    content: " ※";
}

上記コードはセレクタ（p）に2つの擬似要素が書かれていますが、これは間違いです。

1つのセレクタに擬似要素を複数使いたい場合は、以下のようにわけて書きます。

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

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

擬似要素はセレクタの一番最後に書く

セレクタ内に要素名、class、ID、擬似classなどがある場合は、その後に擬似要素を書く必要があります。

例えば、以下は正しい書き方のコードです。

p.text:hover::before { 
    /* 正しい順番の書き方 */
}

以下は間違った書き方のコードです。

p::before:hover { 
  /* 擬似要素の後に擬似classが書かれているので間違い */
}

この場合は、::before はセレクタの最後に書かなければいけないため、:hover を後ろに書くのは間違いです。

contentプロパティで特殊文字を扱う際の注意点

contentプロパティは HTML ではなくCSSのプロパティです。

HTML で使用できるエンティティ（© や &）のマークアップを使用することはできません。

エンティティのマークアップとは以下のようなものです。

&lt; は「<」
&gt; は「>」
&amp; は「&」
&copy; は「©」

特殊文字を使用する必要がある場合は、バックスラッシュの後に16 進数のUnicode 値を続けるUnicode エスケープシーケンスを使用します。

以下は©のUnicodeエスケープシーケンスのコード例です。

.p::after {
  content: "\00A9";  
}

上記のようにすると、正しく © マークを表示できます。

特殊文字の記載が必要な場合は、文字化けなど表示の不具合をせずに表示できます。

擬似要素には::（ダブルコロン）を使用しているのなぜ

擬似要素には::（ダブルコロン）を使用します。

それは、:（コロン）を使用する擬似class（:hoverなど）と区別するからです。

また擬似要素は、CSS3から::（ダブルコロン）に変更になりましたが、以前は:（コロン）で記述されていました。

現在も:（コロン）で書くことはできますが、CSS3から::（ダブルコロン）が推奨になりました。

最新の仕様に従うために、::（ダブルコロン）を使用することをおすすめします。

応用例　サンプルコード

次に応用例としてサンプルコードを紹介しますので、ぜひコピペして活用してください。

引用文の装飾

ブログなどで引用文をデザインするときに、引用符（”）を表示するデザインを使うことがあります。

HTMLに直接引用符を書くかわりに、CSSの擬似要素で装飾を追加する方法があります。

以下は、要素に対して引用符を挿入する例です。

<blockquote>
  引用文の装飾
</blockquote>  

blockquote {
  font-style: italic;
  position: relative;
  padding: 20px;
  border-left: 4px solid #ccc;
}

blockquote::before {
  content: "“";
  font-size: 3rem;
  position: absolute;
  left: 10px;
  top: -10px;
  color: #ccc;
}

blockquote::after {
  content: "”";
  font-size: 3rem;
  position: absolute;
  right: 10px;
  bottom: -10px;
  color: #ccc;
}

NEWラベルをつける

記事のタイトルの右側に「NEW」などのラベルを付けたい場合、::after を利用して追加することができます。

<h3 class="title">
  NEWラベルをつける
</h3>

.title::after {
  content: "NEW";
  display: inline-block;
  background-color: #ff4757;
  color: #fff;
  font-size: 0.8rem;
  padding: 2px 6px;
  margin-left: 5px;
  border-radius: 3px;
}

参考サイト

https://developer.mozilla.org/ja/docs/Web/CSS/Pseudo-elements

https://developer.mozilla.org/ja/docs/Web/CSS/::before

https://developer.mozilla.org/ja/docs/Web/CSS/::after

まとめ

今回は、CSSの::before擬似要素と::after擬似要素の使い方を解説しました。

それではまた〜ノシ