cssのcontentプロパティで特殊文字を使いたい場合

2024年3月7日

本ページにはプロモーションが含まれる場合があります

コードを書いているときに、たまにCSSのcontentプロパティで特殊文字を表示したいケースがあります。
HTML上では©などの文字実体参照を使うことが多いと思いますが、contentプロパティでは数値文字参照を使用します。

数値文字参照について

前述のとおり、contentプロパティでは数値文字参照を使用します。
文字実態参照と数値文字参照には下記のような違いがあります。

文字実体参照の方がわかりやすいですが、contentプロパティでは使用できません。

また、contentプロパティ内では&#は\0に変換する必要があります。

CSS

.copyright::before {
  content: '.copyright::before {
content: '\00A9';
}
A9';
}

あまり使用する機会は多くないと思いますし、覚えるのは難しいので、下記サイト等を参考にするのをおすすめします。