トップページの中の セレクタの中の :before疑似要素 (E:before)

:before疑似要素 (E:before)

  • 最終更新:2009年6月29日 10:19

CSS2で定義された:before疑似要素は、contentプロパティとの組み合わせで、指定した要素の前に指定した内容を生成します。
また、:first-letter及び:first-line擬似要素を:beforfe疑似要素と組み合わせる場合は、生成された内容の最初の文字や一行目に適用する事ができます。

対応ブラウザ
  • IE6未対応
  • IE7未対応
  • IE8対応
  • Firefox3.5対応
  • Opera10対応
  • Safari4対応
  • Chrome3対応

: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疑似要素を指定した要素のスタイルが継承されます。

  • CSS HappyLife
  • underHat
著書(全て共著)

このページの上部へ