CSS擬似要素の美しさを1つのタグで説明する

beforeと::beforeの違い

具体的な使い方に入る前に、擬似クラスと擬似要素について簡単に紹介します。擬似クラスについてはよく聞きますが、擬似要素についてはあまり聞いたことがないと思います。

擬似クラス要素にコロンが1つではなく2つ使われていることがありますが、これは擬似クラスと擬似要素を区別するためのCSS3仕様の要求の一部で、ほとんどのブラウザは両方の表現をサポートしています。

#id:after{
 ...
}
#id::after{
 ...
}

CSS3 の擬似クラスにはシングルコロン（:）、CSS3 の擬似要素にはダブルコロン（::）を使用します。CSS2にすでにある擬似要素、例えば:beforeについては、シングルコロンとダブルコロンが同じように動作するように::beforeと表記されます。

そのため、webkitやfirefox、operaなどとの互換性だけが求められるサイトでは、疑似要素にダブルコロンのスタイルを使用することが推奨されますが、IEとの互換性が求められる場合は、CSS2のシングルコロンのスタイルを使用した方が無難でしょう。

より具体的な情報は、MDN の擬似クラスと擬似要素についての理解をご覧ください。

今回の主役は前後の擬似要素ですが、この2つの擬似要素の魅力について詳しくお話しします。

擬似要素に対応していないタグは？

I also just learned about this pose. Just hasten to add it so as not to mislead readers.

Although pseudo-elements are powerful, there are still some specific tags that do not support pseudo-elements before and after.

tags such as , , and