:before擬似要素。

CSSでのセレクタ(選択子)の一つである、:before疑似要素に関して解説します。

`:before`疑似要素とは。

:before疑似要素とは、当該要素の直前を対象とする疑似要素です。

しばしば、要素の前に補助的に文字列を附加したい場合があります。

例えば、HTMLでアンカーを表す<a>要素などにaccesskey属性を附与してアクセスキーを使えるようにした場合、当該キーを当該アンカーの前か後ろに表示させる事で、当該キーでアクセスが可能である事を知らせたいと思うでしょう。

始めから文書にそのような記述を行えばいいと言う方もいるかも知れませんが、環境に依っては入力出来ない文字もあり、そのような文字もそのまま表示させるのは不適切です。

勿論、予めダイヤルボタンを何らかの形でマークアップしておいて、環境に合わせたスタイルシートで表示/非表示を切り替えるようにする事も出来ますが、余りスマートな方法とは言えません。

このような表現を可能にするのが、:before疑似要素と:after疑似要素と言えます。

:before疑似要素の書式は、

セレクタ:before

です。

ここで、セレクタとしては任意のものが使えますが、対象要素を問わない場合なら全称セレクタ(汎用セレクタ)を省略出来ます。

:before擬似要素のdisplayプロパティの値は、元の要素により、以下のいずれかとなります。

:before擬似要素は、

には実装されておりません。

また、一部で挙動がおかしい場合があります。

WAP 2.0では、:before擬似要素は仕様に含まれておりません。