CSSの「:before」、「:after」って何？

CSSの:before,:afterは他のものとは違う独特の動きをしており、初心者が理解し難いため避けられがちな内容かと思います。

今回は、そんな:before, :afterを初心者でも出来るだけわかりやすいようにご紹介したいと思います。

本記事の対象者

本記事は、以下の3点を全て満たす方を対象として書かれています。

• HTML/CSSの初心者
• :before,:afterを理解していない、または初めて名前を聞いたという方
• インライン要素、ブロック要素を理解している(まだよくわかってない！という方はこちらで勉強しよう！)

:before, :afterの基本

例えば、次のようなHTMLがあるとします。

<p class="txt">テキスト</p>

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

これに:beforeと:afterを使ってみましょう。

<!-- ここから追加 -->
<style>
  .txt:before {
    content: "びふぉー";
  }
  .txt:after {
    content: "あふたー";
  }
</style>
<!-- ここまで追加 -->
<p class="txt">テキスト</p>

すると、次のような表示になります。

「テキスト」という文字の前後に、:before,:afterのcontentで指定された文字が追加されましたね？これが:before,:afterの効果です。

ちなみに、上のコードは次のコードとほとんど同じ意味です。

<p class="txt"><span>びふぉー</span>テキスト<span>あふたー</span></p>

:before, :afterの基本まとめ

:beforeは「指定した要素（今回の場合、.txt）の中の一番先頭に、contentで指定された文字を入れる」という効果があります。逆に、:afterは「指定した要素の中の最後尾に、contentで指定された文字をいれる」という効果になります。

さらに、この時に:before, :afterに挿入された要素の事を「:before(:after)擬似要素」と言います。

:before, :afterの使い方は

文字を入れたい要素:before {
  content: "要素の中の先頭に入れたい文字";
}

文字を入れたい要素:after {
  content: "要素の中の最後尾に入れたい文字";
}

となります。

これが:before, :afterの一番基本になります。

:before, :after擬似要素にスタイルをつけたい

次に、「びふぉー」を赤色、「あふたー」を青色にしたいとします。

その場合は次のようにスタイルを変更すれば可能です。

<style>
  .txt:before {
    content: "びふぉー";
    color: red; /* ここを追加 */
  }
  .txt:after {
    content: "あふたー";
    color: blue; /* ここを追加 */
  }
</style>
<p class="txt">テキスト</p>

結果は下のようになります。

:before, :afterには文字を入れる効果があると書きましたが、その文字には:before,:afterで指定されたスタイルが適用されます。

文字色を変える以外のスタイル指定

文字色を変えるだけでなく、次のような指定ももちろん可能です。

<style>
  .txt:before {
    content: "びふぉー";
    display: block;
    height: 100px;
    background: red;
  }
  .txt:after {
    content: "あふたー";
    display: block;
    height: 100px;
    background: blue;
  }
</style>
<p class="txt">テキスト</p>

結果は次のようになります。

:before,:after擬似要素で挿入される要素はデフォルトでinlineなのですが、display:blockを指定することでblock要素に変更することももちろん可能なわけです。

ちなみに、先ほどのコードは次のコードとほぼ同じ意味です。

<style>
  .before {
    display: block;
    height: 100px;
    background: red;
  }
  .after {
    display: block;
    height: 100px;
    background: blue;
  }
</style>
<p class="txt">
  <span class="before">びふぉー</span>
  テキスト
  <span class="after">あふたー</span>
</p>

慣れないうちは、:before,:afterは上のように:before,:afterを使わないコードに置き換えて考えれば理解しやすいかと思います。

contentの中身は空でもOK

今まではcontentに文字を指定した例ばかり挙げていましたが、実際には次のように文字を入れずに使う場合の方が多いです。

.txt:before {
  content: "";
  display: block;
  height: 100px;
  background: red;
}
.txt:after {
  content: "";
  display: block;
  height: 100px;
  background: blue;
}
</style>
<p class="txt">テキスト</p>

次のような結果になります。

contentの中身は空でも問題ないのですが、content自体は指定しておかないと正常に動作しませんので、:before, :afterを使用する場合はcontentの指定を忘れないように注意しましょう。

現場での:before, :afterの使われ方

実際:before, :afterが現場でどのように使われているかというと、アイコンが先頭に付いたテキストを表現する際に使われることが多いです（自分は別の方法でやることが多いですが、それはさておき）。

例えば、

<style>
  li:before {
    content: "";
    display: inline-block;
    background: url(./arrow.png);
    width: 8px;
    height: 12px;
    margin-right: 5px;
  }
</style>
<ul>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ul>

このようにして、アイコン付きテキストを表現する場合に使います。

これを:beforeを使わずに書こうとすると

<style>
  .icn {
    margin-right: 5px;
  }
</style>
<ul>
  <li><img class="icn" src="./arrow.png" alt="" width="8" height="12">テキスト</li>
  <li><img class="icn" src="./arrow.png" alt="" width="8" height="12">テキスト</li>
  <li><img class="icn" src="./arrow.png" alt="" width="8" height="12">テキスト</li>
</ul>

と、li毎にimgタグを記述する必要があり、かなりコードが汚くなってしまいますし、アイコンに変更が出てきた場合修正する箇所が多くなってしまいます。

以上

:before,:after擬似要素は直感的に理解しづらい部分があり、また使わなくてもなんとかなることが多いため勉強を後回しにしがちですが、実際の現場ではこれでもかというくらい頻繁に出てくるので必ずマスターしましょう！

以上、たにっぱでした〜