after擬似要素

TOPページに戻る > CSS

after擬似要素

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

使い方（書式）css

文字

要素:after { content : "☆"; }

画像

要素:after { content : url("sample.gif") }

対応ブラウザ

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

実際の指定方法

cssファイル

p:after { content : "☆"; } /* p要素の後ろに☆を割り込ませます */

html部分

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

実際の表示

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

P要素の内容

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

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

cssファイル

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

html部分

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