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

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/

Hex codes for common HTML elements:
https://makandracards.com/irk/tags/css

コメントを残す