CSS
CSS3

:afterなのか::afterなのか問題

はじめに

何度か忘れて、あれ?どっちだったっけ?ってなることがあったのでメモがわりに書いておきます

擬似要素について

選択された要素の、特定の部分を整形できるようにするものです。例えば、今回タイトルに出した::afterや::beforeなどがこれに当たります。

とりあえず、答え

端的に言えば、現在は擬似要素の前に二重コロン(::)をつけることが正解です。
なので、

.target::after { }

これが正解です。

ただし、注意点があります。IE8.0未満にも対応させる時など、CSS3対応していないOSで使用する場合は、単一コロン(:)を使用しないといけません。そのため、多くのブラウザでは単一コロン(:)でもしようできるようになっています。
これは、CSS2とCSS3で仕様が異なるためです。なぜ、CSS2とCSS3で違いができたのでしょうか

CSS2とCSS3で仕様が異なる理由

CSS3からは、擬似クラスと区別をつけるため、
擬似要素には二重コロン(::)を、擬似クラスには単一コロン(:)をつけることになりました。
CSS2ではこの二つに区別をつけていなかったため、どちらも単一コロン(:)で記述していました。

擬似クラスとは

選択された要素に対して、特定の状態を指定することができるものです。擬似要素とは違って、対象となる要素全体に関わるスタイルを指定できます。例えば、マウスカーソルが要素の上にいた際のスタイルを指定する:hoverなどがこれに当たります。

まとめ

  • 擬似要素には二重コロン(::)
  • 擬似クラスには単一コロン(:)
  • ただし、CSS3が対応していないOSでの使用を考えるならどちらも単一コロン(:)