CSSの疑似要素のcontentに指定した日本語が文字化けする

beforeやafter疑似要素にcontentで日本語を指定すること、ありますよね。

たとえば、わたしの場合はliタグの頭文字を「●」にしたりします。

li::before {
  content: '●';
  margin-right: 5px;
  font-size: 10px;
  color: #f39800;
}

このままだと、WindowsのIEやEdge等で文字化けすることがあります。

文字化けする可能性がある条件の例

  • CSSが外部ファイルである
  • CSSの文字コードがShift-JISでない

Unicodeで変換する

このような場合は、Unicodeで変換してあげます!

li::before {
  content: '\25CF';
  margin-right: 5px;
  font-size: 10px;
  color: #f39800;
}

Unicodeを使えば、日本語の文章も擬似要素で表示可能♪

参考

いつも、こちらの記事から変換させてもらっています!

beforeやafter疑似要素のcontentプロパティで日本語の文字化けを回避する方法

お世話になっていますm(_ _)m

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

CAPTCHA