CSS の 擬似要素 :after と :before
CSS に :after と :before という擬似要素があります。 名前の通り、擬似的に要素を作ってくれるのですが その応用範囲は広すぎるので、 簡単に「これまではできなかった例」で、紹介します。
次のように <li> タグの :before に “【”を、 :after に “】”を content 属性として指定します。
li:before {
content : "【"
}
li:after {
content : "】"
}
あとは次のように普通にリストを作成します。
<ol> <li>起</li> <li>承</li> <li>転</li> <li>結</li> </ol>
次のような結果になります。
対応していないブラウザもあるので、画像で表示しています。
このように“【】”で囲むことができました。
デザインを CSS だけで定義したくても どうしてもデザインのためのタグを書かなければならないときがあります。
例えば、前回の「吹き出し」も、尖った部分を作るには 次のように、メッセージ部分と別のタグを書く必要がありました。
<div class="balloon"> <p>メッセージ部分</p> <div class="arrow">↓</div> </ol>
多くのブラウザで擬似要素がサポートされれば、 デザインのための要素を書くことはグッと減るはずです。 当然 IE6 も・・・。
