before疑似要素のcontentで文字化けが起こった場合の対処法

更新

before疑似要素を使って、ul要素内のli要素の先頭に大きめの「●」を付けている@web_shufuです。先日、全ファイルの文字コードをUTF-8に統一しているにもかかわらず、「●」が「笳」に文字化けするという理解不能な状態が発生して、復旧に30分以上かかったのでメモ。

元々のCSS

当サイトWeb Shufuでは、ul要素内のli要素にbefore疑似要素を設定して、以下のようなスタイルをあてていました。

ul li:before {
content:"●";
color:#00a48c;
font-weight:bold;
font-size:24.5px;
vertical-align:middle;
}

これで、今までは問題なく「●Wordpress」のような箇条書き表記が出来ていたのです。

症状

ところが、何の前触れもなく、すべてのul要素内のli要素で「●」が「笳」に変わりました。

例えば、いままで「●Wordpress」となっていたところが「笳Wordpress」に変わったわけです。

とりあえず茫然自失。

色々やってみたが

最近プラグインのアップデートをしたので、それが原因かと思って、プラグインを無効にしてみたり削除してみたり色々しました。

しかし、相変わらず「笳」がのさばっています。

つまり、プラグインのアップデータなど関係なかったようです。

救世主登場

そんな私の前に颯爽と現れたのが、以下のサイトでした。

WebTecNote – [css] contentプロパティで挿入できるコンテンツ

半角英数や半角の記号ならそのままでOK。ただしクォーテーションなどのメタ文字は\でエスケープしないと表示されない。
日本語などの2バイト文字も書いたまま表示されるけど、数値文字参照の値で書いた方が無難です。

結局、今までのCSSはいつ文字化けしてもおかしくない状態だったわけです。

そして、文字参照についても注意点が。

&を¥に変更する、#とxを削るか0に変更する、ミコロンを削除する、と3ステップ踏む必要があります。

&#xを\に変えて末尾のセミコロンを削除したものを、content:” ”;の引用符の内側に入れないといけないみたいです。

その通りやるとうまくいきました。

新CSS

新しいCSSは以下の通りです。

ul li:before {
content:"\25cf";
color:#00a48c;
font-weight:bold;
font-size:24.5px;
vertical-align:middle;
}

なお、ワンクリックで文字を16進数文字参照に変換してくれるサイトも見つけました。

before疑似要素のcontentの文字化け回避

なかなか便利です。

コメントを残す

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