擬似要素（::before、::after）のcontentプロパティで日本語など文字化けすることがある

擬似要素（::before、::after）のcontentプロパティで日本語などのマルチバイトで文字化けすることがあります。

起こる条件としては、対象の擬似要素が含まれるCSSが外部ファイルであること、CSSファイルの文字コードがShift_JIS以外であることです。

この現象を回避するには、contentプロパティにしている値をUnicodeに変換することで回避できます。
例えば"日本語文字"という文字をUnicodeにすると"¥u65e5¥u672c¥u8a9e¥u6587¥u5b57"となります。

このようにUnicodeは¥u + 16進数の4桁から6桁で表しますが、contentプロパティで使用する場合は、¥ + 16進数の4桁から6桁と"u"を除いた状態で指定する必要があります。

Unicodeへの変換は、当サイトにあります Unicode変換ツール でも行うことができます。