TS!疑似要素でHTML特殊文字が表示されないの!! - ねこさんとへびさんの新人技術ブログ

疑似要素の::beforeや::afterなどでHTML特殊文字が文字化けしてしまったらどうすればよいか。
結論を先に書くと

HTML特殊文字の数値文字参照16進数表記を調べる(Ex. ☀)

16進数部分のみ着目(Ex. 2600)

正確に6桁16進数にする（0埋めしない4桁でも大丈夫です。）(Ex. 002600)

先頭にバックスラッシュをつける(Ex. \002600)

変換した文字列を擬似要素のcontentプロパティに指定する(Ex. content: "\002600";)

文字化けで困っている人は上の手順を試してみてください！

以下、もっと詳しく。

前回の記事、
tkstudy.hateblo.jp
で、

f:id:tksptan:20181004184230j:plain

上図のように各目標の左横に進捗度を表す天気記号をつけたかったのですが、CSSにそのHTML特殊文字を書いたら文字化けしました。
そうです、CSSの文字列にHTML特殊文字は使えないのです。

参考：
developer.mozilla.org

HTML特殊文字(アンパサンドで始まりセミコロンで終わるテキストの固まり)の代わりに、Unicodeコードポイントを使用しましょう。

晴マーク(HTML特殊文字：☀ ）をUnicodeコードポイントにした記述

ul.moku li.finish:before {
  content: "\002600";
  position: absolute;
  left : 1em;
  color: #ffb03f;
}

晴マークは、この部分ですね。

content: "\002600";

☀ をUnicodeコードポイントに変換する手順は、
冒頭にも書いたように、以下のとおり。

HTML特殊文字の数値文字参照16進数表記を調べる(Ex. ☀)

16進数部分のみ着目(Ex. 2600)

正確に6桁16進数にする（0埋めしない4桁でも大丈夫です。）(Ex. 002600)

先頭にバックスラッシュをつける(Ex. \002600)

この手順で変換すれば、他の文字も表示できるようになります。

■補足1
HTML特殊文字の数値文字参照16進数の調べ方ですが、
個人的にこちらのサイトが一番分かりやすかったです。

HTML特殊文字一覧（数値参照・文字参照） – atomicbox

■補足2
参考：CSSコンテンツを使用したHTMLエンティティの追加
CSSコンテンツを使用したHTMLエンティティの追加 [html-entities] | CODE Q&A 問題解決 [日本語]

■補足3 目標リストに適応しているCSS

ul.moku {
  border: solid 2px #6091d3;
  border-radius: 10px;
  color: #223a70;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
}

ul.moku li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

ul.moku li.finish:before {
  content: "\002600";
  position: absolute;
  left : 1em;
  color: #ffb03f;
}

ul.moku li.start:before {
  content: "\002601";
  position: absolute;
  left : 1em;
  color: gray;
}

ul.moku li.yet:before {
  content: "\002602";
  position: absolute;
  left : 1em;
  color: blue;
}

文字コードについてあまり詳しくないので、用語など間違いがあればご指摘いただけると嬉しいです!

(byへびさん）