:before擬似要素と:after擬似要素
2010.02.06
clearfixを使っているとどうしても:afterという文字が目につきます。いつも疑問に思いつつもスルーしていたのですが、ようやく調べました。
:before・:afterの擬似要素ははCSS2で定義されています。ただしWin版IE6・7は対応していません。（だからclearfixでは:afterを使用せずバグを利用するんですね…）
次のように使用します。
p:before{
content:url("画像名");
}
p:after{
content:"…こんなかんじでしょうか…";
font-size:10px;
color:#ff000;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"… ・ ・ ・ </head> <body> <p> 昨日はごぼうが食べたかったのできんぴらにして食べました。 </p> <p class="example"> 今日は私の大好きな焼き鳥とお酒…といきたいところです。 </p> ・ ・ </body> </html>
ブラウザで見ると次のようになります。
昨日はごぼうが食べたかったのできんぴらにして食べました。
今日は私の大好きな焼き鳥とお酒…といきたいところです。
参考はコチラ↓
:after疑似要素 (E:after)
コチラも読んでみてください。
body要素のbefore, after擬似要素で背景指定が無視される
関連
おすすめ
- カテゴリーページの時にURLに/categoryがついてしまう時の対処 - 0 views
- テキストリンクの色いろいろ - 0 views
- WordPressのSEO対策に…Google XML Sitemapsプラグイン - 0 views
- リンク切れに有効！Broken Link Checker - 0 views
- よけいなものは要らない！meta情報の編集 - 0 views