[CSS]文章の先頭に画像を表示する擬似クラス"before""after"要素の使い方！

文章の先頭、見出し部分にiconとして画像を表示したい！という場合に利用出来る、擬似クラス"before""after"。
その名の通り、指定した要素の「前”before”」か「後”after”」に画像を挿入することが出来ます。

実際に挿入すると↑こんな感じで見えます。

HTMLサンプルコード

エバーセンス開発ブログ！

CSSサンプルコード

p:before {
    content: url(../img/es_logo.png);
    margin: 10px;
    position: relative;
    top: 8px;
}

p:after {
    content: url(../img/es_logo.png);
    margin: 10px;
    position: relative;
    top: 8px;
}

という感じです。簡単！
SAMPLEのCSSでは、画像の位置をテキストを合わせる為に、positionを指定して揃えています。
contentプロパティで追加した画像は、”置換インライン要素”なので、positionで調整しないとテキストのベースラインと下端が揃った状態で表示されます。

↑少し分かりづらいですが、画像の下端とテキストの下端が揃ってますね。

今回のSAMPLEコードの様に、positionを使用すると位置を調整できますが、relativeで調整した場合、本来表示されるていた場所に画像があると他の要素が判断しますので、お気をつけて。
（※：置換インライン要素とは）
　
　
　

"before""after"対応ブラウザ

・Chrome
・Safari4〜
・Firefox3.5〜
・Opera6〜
・IE8〜
　
しかし、何かと便利な"before""after"ですが、IE7以下は対応していないんですね・・・；
便利なんですが、相変わらず古いIEでは対応していない事もあるようなので、過信は禁物。
作成しているサイトが、IE7以下で表示する可能性がある方はお気をつけて！

ちなみに、"jQuery Pseudo Plugin"という、「IE7でも”before””after”の要素を利用できるようにするスクリプト！｣という素晴らしいモノがありました！
作って頂いた方、有難う御座います。