::before | スタイルシートリファレンス

CSSの::beforeは疑似要素の１つでセレクタの子要素の最初の要素として擬似的な要素を生成します。

一般的にはcontentプロパティとセットで利用され、contentプロパティでテキストや文字、カウンターなどが最初の要素として生成されます。また生成された要素はインラインとして生成されます。

また::beforeではセレクタで指定した要素の子要素の「最初」に擬似的な要素を生成しますが、逆に子要素の「最後」に挿入する疑似要素として::afterという疑似要素もあります。使い方はほぼ同じですので、あわせて覚えておきましょう。

CSSの中で::beforeと:beforeの表記を見たことがある方も多いと思いますが、CSSではどちらの表記でも正常に動作します。

CSS3以前は:beforeのようなコロン1つの表記でしたが、CSS3で疑似クラスと疑似要素を表記上区別するために、::beforeのようなコロン2つの表記が登場しました。

上記のサンプルコードでは疑似要素の::beforeを使い、対象のセレクタの最初の要素として、テキストや画像を表示しています。

CSSの疑似要素の::beforeはほぼ全てのモダンなブラウザで対応しています。::beforeのブラウザ毎の対応状況の詳細を見たい方は下記よりご確認頂けます。

CSSの::beforeの疑似要素や::afterの疑似要素が設定しているのに効かないといった事があります。その場合の対処法を下記にまとめていますので、効かないという方はぜひ参考にして下さい。