【CSS】擬似要素before、afterの意味や使い方の解説

CSSの初心者が最初にbeforeやafterを見ると「？」となることでしょう。

最初は分かりづらいと思いますが、使えるようになるととても便利なのがbeforeとafterです。

今回はこの二つについて詳しく解説しようと思います。

初心者も絶対に覚えておきたいものなので、しっかり読んで使い方をマスターしておきましょう。

擬似要素のbefore、after

擬似要素というのは、要素の特定の場所を整形するためのものです。擬似要素という言葉の意味はそこまで気にしなくて良いです。

beforeとafterは「擬似要素」という言葉だけ覚えておけば大丈夫です。

.element::before {
 content: "";
}

このような形で使われます。

CSS3ではコロン（:）二つをつけて、セレクタの後に記述します。コロン（:）一つでも大丈夫です。

IE8以前の古いブラウザでは、コロン（:）一つでないと認識されません。

.element:before {
 content: "";
}

昔はコロン（:）一つだったのが二つになったのは、擬似クラスと区別するためです。擬似クラスとは以下のような記述です。

.element:first-child {
  font-size: 14px;
}

コードを書く人にとって「擬似要素」なのか「擬似クラス」なのかはあまり気にする必要はありませんが、一応区別するためにコロンが二つになりました。

とはいえ、一つでも二つでも大丈夫です。

beforeの使い方

それでは、実際にどうやって使うかを解説します。

例えば、以下のようなHTMLがあったとします。

<p class="new">最新情報</p>
<p class="new">最新情報</p>
<p class="info">お得情報</p>
<p class="info">お得情報</p>

これにCSSで擬似要素を適用してみましょう。

.new::before {
  content: "[new]";
}

擬似要素beforeは、contentプロパティとセットで使います。contentがないと何も表示されません。

contentには表示させたいテキストなどを記述します。

これは以下のように表示されます。

「before」の言葉通り、contentの内容が要素内の「前」に挿入されます。

beforeやafterの便利な所は、いちいち一つ一つ[new]と書かなくても、CSSでまとめて挿入することができることです。

先ほどのCSSにもう少し書き足してみます。

.new::before {
  content: "[new]";
  color: #FA5858;
}
.info::before {
  content: "[info]";
  color: #2E64FE;
}

以下のように表示されます。

afterの使い方

お次はafterの使い方です。挿入位置が違うだけで、beforeとほとんど同じです。

先ほどのHTMLを使って説明します。

<p class="new">最新情報</p>
<p class="new">最新情報</p>
<p class="info">お得情報</p>
<p class="info">お得情報</p>

ここにafterを適用していきます。

.new::after {
  content: "[new]";
}

擬似要素afterも、contentプロパティとセットで使います。contentがないと何も表示されません。

contentには表示させたいテキストなどを記述します。

ブラウザには以下のように表示されます。

「after」の言葉通り、contentの内容が要素内の「後ろ」に挿入されます。

もう少しCSSの記述を増やしてみましょう。

.new::after {
  content: "[new]";
  color: #FA5858;
}
.info::after {
  content: "[info]";
  color: #2E64FE;
}

ブラウザには以下のように表示されます。

便利ですね。

Developer Toolsで確認してみよう

beforeやafterがHTMLのどの位置にあるのかは、Google ChromeのDeveloper Toolsで確認することができます。

擬似要素が適用されている要素の上で右クリック→「検証」を選択して下さい。

するとDeveloper Toolsが起動して、以下のように表示されます。

グレーの三角形をクリックすると、要素の中身がみれます。

beforeはこの位置に挿入されます。

afterはこの位置に表示されます。

まとめ

最初はちょっと分かりづらい擬似要素のbeforeとafterですが、使い方を覚えるとめちゃくちゃ便利です。

同じHTMLを何度も書く手間が省けるので時間短縮になり、後から修正するのも楽になります。

ぜひ使い方をマスターしましょう。

以下の記事もおすすめです。

初心者のためのHTML・CSS入門講座【CSS編】

【CSS】marginとpaddingの違いや使い方の解説