CSSの擬似セレクタである「:before」と「:after」はcontentプロパティというものが使える。
これがまたWEBを彩る要素として非常に便利で、最近多用する。
最初は、IE7以下が未対応ということもありリストにちょっとしたアイコンを付けたくても避けてきた手法だが、数々のモダンブラウザの台頭により、そろそろ使っても問題ないだろうと思い、今では躊躇なく使っている。
16進数値文字も挿入可能
contentプロパティで挿入出来るものは画像やテキスト。よく使うのは「»」や「«」。リストやボタンに使うことが多い。テキストは2バイト文字でも表示されるようだが、16進数値文字が推奨されている。
ただし、以下の様な一定の規則がある。
- セミコロンを削除
- #とxは削除するか0に変換
- ＆を￥に変換する
使いようによっては非常に便利で、テキストにオススメアイコンやNew!アイコンをつけたり、ダウンロードリンクにexcelやPDFのアイコンをつけたり、印刷リンクにプリンターのアイコンをつけたり…。用途は様々。
ただし冒頭で話したとおりIE7以下は無視されるので、無くても意味は通じる程度の使い方が今の段階では無難である。
