CSSのcontentプロパティで特殊文字を表示する方法！

CSSのcontentプロパティは::before・::afterの疑似要素と組み合わせて要素のテキストの前や後に特定の文字を付けるときによく使われます。

しかし、特殊文字の丸文字や三角の記号やコピーライトなどはそのままcontentプロパティに入力してもブラウザ上に正常に表示されなかったり文字化けする事があります。

そこで今回はcontentプロパティで特殊文字を表示する方法について解説します。

contentプロパティで特殊文字を表示するには特殊文字のコードをcontentプロパティに設定する必要があります。

contentプロパティに設定すべきコードは下記のテーブルを参考にしましょう。

上記のテーブルを参考に、contentプロパティで特殊文字を表示したサンプルコードは下記の通りです。

上記のサンプルコードでは三角の特殊文字とコピーライトの特殊文字をcontentプロパティで表示させています。

また特殊文字のコードだけ分かっている場合は以下の規則に従って変換したコードをcontentプロパティに設定しましょう。

1.&の記号は\（バックスラッシュ）Windowsは¥（円マーク）に変換
2.#の記号は0（数字のゼロ）に変換
3.数字は10進数から16進数に変換
4.最後の;（セミコロン）は省略する

例として「▲」は上記の変換ルールに則ると「\025b2」となります。

10進数から16進数に変換した値が分からないという方は下記の方法を試して下さい。

下記は10進数から16進数に変換するツールです。10進数の数字を入れて、「変換する」ボタンを押すと16進数が表示されますので、ぜひご利用下さい。