擬似要素:beforeや:afterに、特殊文字を入力する方法

今回は少し限定的な状況でのお話です。コピーライトやライセンス表記に使う©や®。
通常であればコピーライトは©ライセンスは®とhtmlに入力するとそれぞれの特殊文字へと変換されますが、疑似要素の中でこれを表示しようとすると平文で©と表示されてしまいます。

今回はその、疑似要素内での特殊文字表示方法についてまとめます。

文字参照ではなく数値参照で

特殊文字を©などの文字列で呼び出すことを文字参照と言います。これは直接入力できない©や®などの文字を表示させることのできる機能ですが、同じ機能のもので数字でこれを表示する数値参照というものがあります。

先述の©と®であれば©がコピーライト、®がライセンス表示となります。

See the Pen dWWrab by hoshu_t (@hoshu_t) on CodePen.

疑似要素用に記述を変換

疑似要素に利用する場合、この数値参照を元に、記述を改変する必要があります。
改変の手順は以下になります。

1. 数値参照を16進数で行う
2. & を \（バックスラッシュ）に変更する
3. #とxをそれぞれ0に変更する
4. ;（セミコロン）を削除する

つまり©であれば\00a9と疑似要素内に表記します。
以下の例を参照ください。

See the Pen ZKKNyW by hoshu_t (@hoshu_t) on CodePen.

いかがだったでしょうか。用途を限定される情報でしたが、案件で先日これが必要となったので、備忘録の意味も兼ねてご紹介いたしました。
特殊文字や機種依存文字を擬似要素で表示させたくなったときは思い出してみてください。