before擬似要素

TOPページに戻る > CSS

スポンサード リンク

before擬似要素

要素の先頭の前に要素を割り込ませることができます
割り込ませた要素にcontentプロパティを使えばcssで指定するだけでhtmlに属性をつけることなく、cssだけでスタイルを適用できます

使い方(書式)css
文字
要素:before { content : "☆"; }
画像
要素:before { content : url("sample.gif") }
対応ブラウザ ie8 ie9 ie10 ie11 google Chrome safari fire fox opera

※before擬似要素、contentプロパティはIE6、IE7が対応していません(IE8から対応しています)

実際の指定方法

cssファイル

p:before { content : "☆"; } /* p要素の手前に☆を割り込ませます */

html部分

<p>P要素の内容</p>

実際の表示


※IE6、IE7では反映されません、IE8以上で確認してください

P要素の内容


要素を属性セレクタ、classセレクタ、idセレクタで絞り込む


before擬似要素はセレクタと併用できます
適用箇所を限定したい場合は最初の要素にclassセレクタ、idセレクタ、属性セレクタをつけます(今回はclassセレクタで)
※html要素に属性がついている場合は属性セレクタと併用するとソースがすっきりします

cssファイル

p.hoge:before { content : "☆"; }

html部分

<p class="hoge">P要素の内容</p>




(C)2012 ホームページ作成無料