表現の幅が広がる!!? CSS3 で追加された ::before, ::after 擬似要素の使い方

phi phi on css

昔はちょっとしたことをやりたいだけでも, JavaScript を使ったり HTML に 見た目のためだけに要素を追加したりしていました.

CSS2, CSS3 以降からは色々なプロパティが追加されて劇的に表現の幅が広がり, Pure CSS でも様々なことがやれるようになりました.
今回はその中から ::before, ::after 擬似要素について紹介したいと思います.

使用例もいくつか並べてるのでよかったら参考にしてください.

Runstant Demo

簡単なサンプルを作りました. 動かしながらなんとなくイメージを掴んでみてください.

::before, ::after 擬似要素とは?

そもそも擬似要素って何?って話ですよね. 擬似要素(Pseudo-elements)とは, マッチする要素に対して擬似的に要素を追加できる機能を指します.

::before, ::after 擬似要素は, マッチした要素の最初/最後の子要素を定義することができるセレクタです.

実は, この機能自体は CSS2 の時点であったのですが, このころは擬似クラスと一括りになっていて :before, :after とコロン1個で指定していました.

CSS3 からは擬似クラス, 擬似要素の区別を付けるために ::before, ::after とコロン2個を指定する形になりました.

基本どちらでもちゃんと動きます.

Usage

content プロパティに表示するテキストを指定できます. こんな感じで指定できます.

.sample::before {
  content: '[before]';
}
.sample::after {
  content: '[after]';
}

この場合は sample というクラスが指定されている要素の子要素の最初と最後に それぞれ [before], [after] というテキスト要素が追加されます.

注意点

::before, ::after はよく要素の直前/直後だと勘違いされがちですが, 子要素の最初/最後であることに注意してください!

構造でいうとこんな感じですね.

<div class='sample'>  
  ::before
  Hello, world!
  ::after
</div>  

また, デフォルトではインライン要素なので, ブロック要素にしたいときは明示的に display:block; を指定する必要があります.

Examples

::before, ::after 擬似要素を使った例を作ってみました. Runstant Lite で作ってあるので実際に動かしたり, コードをいじったりして遊んでみてください.

checked

一番よく使う例です. ::after 擬似要素を使って done クラスが付いている要素のみ✓が付くようになっています.

blockquote

::before, ::after 擬似要素を使って, quotes をつけてます. より引用文っぽくなっているのがわかるかと思います.

icon

::before を使ってアイコンを表示する例です.

new

::after を使って New アイコンを表示する例です.

clearfix

::after を使うことで, HTML 側で要素を追加することなく, clearfix しているのがわかるかと思います.

ためしに clearfix クラスを外すと段組がリセットされずに footer が右側に並んじゃうのがわかるかと思います.

tooltip

文字にマウスをのせるとツールチップが表示されます. 擬似要素と css の content プロパティを上手く使えばこういったツールチップも簡単に作ることができます.

まとめ

実はこれ前のブログからの移植で, 2年程前のエントリーです... が今でも参考になるかと思い少し修正したり, サンプルを Runstant で書きなおして公開した次第です.

擬似要素は, 古い IE などではバグがあったりそもそもサポートされてなかったりと知識としてあってもなかなか使えなかったりしたかと思います.

ですが, 最近だと IE サポート必須といった頭のおかしなプロジェクトもだいぶ減ってきましたし, 上手く使えば CSS だけで簡単に面白い表現ができるのでぜひ積極的に使ってみてください♪

Reference