CSS contentプロパティの文字化け対応

2015/3/27 2015/3/27

小野諭

CSSで:before、:afterの擬似要素で生成する内容を指定するのがcontentプロパティです。

このプロパティで文字列を指定しても、指定した通りに表示されず、文字化けしてしまう場合があります。そのような場合は、16進数の数値文字参照で指定します。そして、その16進数の数値の前には\00と記載します(\は日本では"￥の半角文字"です)。

contentプロパティで使用する文字列への変換例

ሴ　→　\001234
&#xは16進数の数値文字参照であることを表していますから、その数値の前に\00と表記しています。

{　→　\007b
&#は10進数の数値文字参照であることを表していますから、基数変換で16進数に変換して、変換後の数値の前に\00と表記しています。

%aa　→　\00aa
パーセントエンコーディングの場合、%の後の数値は16進数の数値文字参照ですから、その数値の前に\00と表記しています。

contentプロパティで挿入できるコンテンツ：
http://tenderfeel.xsrv.jp/css/787/