CSSのcontentプロパティで絵文字や4バイト漢字を使う

CSSテキストで

• 4バイト絵文字（例：😀）
• 4バイト漢字　（例：𩸽【ほっけ】）

などのUnicode文字を使う方法メモ。

１．直接書く

例えば、style.cssに書く場合、

style.cssの文字コードが「UTF-8」な場合は直接Unicode文字を書いてしまえばOKです。

a::after {
  content: "😀";
}

今の時代ほとんどの場合は「UTF-8」だし、

というかUTF-8以外を使う理由がないので、もはやこの方法一択でOK。

 

逆にShift-JISやEUC-JPなどの場合は、この後述の2.の方法でないとだめ。

２．Unicode番号で書く

HTMLでは、HTMLエンティティ（数値文字参照や文字実体参照などとも言う）を使って、Unicode文字を書くことができます。

HTMLエンティティというのは、例えば😀←この絵文字はUnicodeのコードポイントで表すとU+1F600だから、😀ってHTML本文中に書けば😀が表示される･･みたいな仕組みのやつ。

 

CSSでも同じような書き方ができますが、HTMLとは少し違います。

CSSでは、例えば😀（U+1F600）を書きたい場合は以下のように、\（エスケープ記号）の後にU+1F600（Unicode番号）を書きます。

a::after { 
  content: "F600";
}

 

連続して書きたい場合は、連続して書きます。

a::after { 
  content: "F600F600F600F600F600F600";
}

おわり