外部スタイルシートでcontentプロパティの値に日本語などの多バイト文字を指定すると文字化けして表示される。
HTML
<div class="sample1">←content</div>
CSS
@charset "Shift_JIS";
div.sample1:before {
content: "日本語";
}
div.sample1:before {
content: "日本語";
}
対象ブラウザ
Mac
Safari1
(Safari2は修正済み)
回避方法
外部スタイルシート内でバックスラッシュを用いたエスケープを行えば文字化けしません。
@charset "Shift_JIS";
div.sample2:before {
content: "¥65E5 ¥672C ¥8A9E";
}
div.sample2:before {
content: "¥65E5 ¥672C ¥8A9E";
}
文字コードの作り方
(1) 文字コードを調べる
(2) 10進数から16進数に変換する
(3) ¥マークを付ける
(2)
外部スタイルシートの文字コードをUCS-2にすることで文字化けを回避できる。
関連プロパティ
content内容(コンテンツ)を挿入する
主要ブラウザに非対応