:before疑似要素 (E:before)
CSS2で定義された:before疑似要素は、contentプロパティとの組み合わせで、指定した要素の前に指定した内容を生成します。
また、:first-letter及び:first-line擬似要素を:beforfe疑似要素と組み合わせる場合は、生成された内容の最初の文字や一行目に適用する事ができます。
- 対応ブラウザ
-
:before疑似要素のサンプル
p.att:before {
content: "※ ";
color: red;
font-weight: bold;
}
ul li a[href="http://cssnite.jp/"]:before {
content: "[オススメ] ";
color: orange;
font-size: 85%;
}
<p class="att">注意書きっぽいテキスト。</p>
<ul>
<li><a href="http://css-happylife.com/">CSS HappyLife</a></li>
<li><a href="http://cssnite.jp/">CSS Nite</a></li>
<li><a href="http://www.yomotsu.net/">ヨモツネット</a></li>
</ul>
最初のp.att
には、※印が赤の太字が生成され、リストは属性セレクタと組み合わせ、CSS Niteのリンクに[オススメ]と小さめのオレンジが生成されるよう指定しています。
このサンプルを今見ているブラウザで表示すると以下のようになります。
- サンプルのブラウザ上の表示
-
注意書きっぽいテキスト。注意書きっぽいテキスト。注意書きっぽいテキスト。注意書きっぽいテキスト。注意書きっぽいテキスト。注意書きっぽいテキスト。
IE6, 7以外で見ると確認出来ますが、contentプロパティで生成された内容は、:before疑似要素を指定した要素のスタイルが継承されます。