こんにちは、さいとうです。
えー、これからCSSのとってもニッチなことについて語らせていただきますので、
興味の無い方はこちらの写真で和んでから、そっとページを移動してください。
−−−
擬似要素[::before]や[::after]は、指定した要素内の前後に文字を挿入するCSSです。
言葉で書いてもわかりにくいですね。
[html]
<p class=“text”>おすすめアイテム</p>
[css]
p.text::before {
content: “【NEW】”;
}
これをブラウザで表示した結果は、
【NEW】おすすめアイテム
といった具合に、表示結果を見ると「おすすめアイテム」というテキストの前に「【NEW】」のテキストが挿入されています。
−−−
では、「【NEW】」の代わりに「>」（半角の大なり記号）を入れてみましょう。
「>」はhtmlにおいてタグを指定する時に使用するため、サニタイズ（エスケープともいいます）します。
「>」をサニタイズすると「>」となります。
[css]
p.text::before {
content: “>”;
}
結果は、、、
>おすすめアイテム
、、、上手く表示されませんね。
サニタイズしたテキストがそのまま表示されてしまいました。
単純なサニタイズでは表示できないようです。
これを表示するには、別の方法でサニタイズする必要があります。
その方法をご紹介します。（前フリが長くてスイマセン）
−−−
以下がその手順です。
面倒くs…、手順が多いですね。
こちらもわかりにくいので、“>”を例に（1）〜（4）の手順を実践してみましょう。
いきなり何言っているのか不明な感じですが、ザックリ言うと文字を数字に置き換えるということです。
その際16進数の数字に置き換えるのでアルファベットが混じった数値になります。
16進数は（0123456789ABCDEF）で桁が繰り上がる数字です。
“>”を変換すると“>”になります。
16進数で数値文字参照を行うには、こちらのサイトなどで簡単にできます。
※「[3] 文字列を16進数数値文字参照に変換」で変換してください。
変換した“>”の“&”の部分を\（半角バックスラッシュ）に変換すると、“\#x3e;”になります。
変換すると“\003e;”になります。
ふう、あと少しです。
削除すると“\003e”になります。
これをCSSに入れてみましょう。
[css]
p.text::before {
content: “\003e”;
}
さあ、表示結果は、、、
>おすすめアイテム
今度は、上手く表示されましたか？
あまり使う機会は無いかもしれませんが、
♥ ハートマーク（\002665）とか、
♨ 温泉マーク（\002668）とか、
〠 郵便マーク（\003020）みたいな特殊な記号も表示できるんです。
Webフォントもじわじわと浸透してきていますが、フォントを読み込むためページの表示が重たくなりがちです。
一般的な用途の記号マークであればこの手法でも十分対応できるので、試してみる機会はあるかもしれませんよ。
−−−
擬似要素[:before]や[:after]をサポートするブラウザは、
IE8+
Firefox3.5+
Chrome
Safari4+
Opera6+
IEがIE8以上となっていますが、その他はほとんどすべてのモダンブラウザ対応しています。
一般的に使用しても問題ないと言えますね。
ただし、IE8は記述の仕方が他のブラウザと同じではありません。
CSS3において擬似要素を指定する時は beforeの前に“:”が2つ付きます。
p.text::before { color: #FFF;}
しかし、IE8はCSS3に対応していないので、CSS2の書式で書く必要があります。
p.text:before { color: #FFF;}
モダンブラウザではCSS2の書式でもとりあえず表示されますので、
IE8が主要ブラウザから外れるまでは、CSS2の書式で書いておいた方が無難かもしれません。
IE8の正式サポートは2016年1月までとなっていますので、IE8が開発環境から外れるのもそう遠くない未来ではないでしょう。
Web制作者をさんざん苦しめたIEがこれからどんどん少なくなるのは、嬉しいような少し悲しいような、、、時代の流れを感じます。
IE対応から解放されると思っているWeb制作者の皆さん、おめでとうございます！
これからは AndroidのデフォルトブラウザがIE亡き後の「困ったちゃんブラウザ」の称号を引き継ぐと思われますので、
今後とも一緒に四苦八苦しましょう。
さいとう
