数値文字参照を使う時、毎回迷って、毎回同じサイトさんにお世話になっているので、いい加減個人的なまとめを作ってみました。引用多めです。
HTML における文字参照
HTML における文字参照は、以下の2通り。
- 文字実体参照（character entity reference）
- 数値文字参照（numeric character reference）
HTML5 においては、数値文字参照を利用するようにする。以下、参考。
外部の DTD コンポーネントを使用するわけではないため、一般的な HTML の実体参照 (
や©など) を使うことはできません。これらの実体参照は XHTML の DTD で定義されますが、DTD は宣言されません。一般的な HTML の実体参照を使用すると、XML プロセッサーは「undefined entity(未定義の実体参照)」というエラーを表示して動作を停止します。名前指定による文字実体参照で安全なものは、<、>、&、"、'のみです。そこで、文字実体参照ではなく数字実体参照を使うようにします。例えば ではなく を使用し、©ではなく©を使用するようにします。必死の Web ハッカーへの推奨事項:
<、>、&、"、'を除き、名前指定による文字実体参照を使わないこと。
擬似要素（:before :after）での数値文字参照の利用
擬似要素の content プロパティでテキストを挿入する際は、数値文字参照は16進数にする。で、通常の数値文字参照では反映されないので、以下の3点を行う。
- ＆を￥に変更する
- #とxを削るか0に変更する
- セミコロンを削除する
ちょっと脇道。擬似要素の記述は CSS3 以降、コロンが2つになる。
例）:before → ::before, :after → ::after
しかし、IE8 がコロン2つの書き方に対応していないので、現状は1つのままの記述にしておく。
CSS3ではコロンの数によって疑似要素なのか疑似クラスなのかが分かりやすくなります。おそらくCSS3では疑似クラスも疑似要素も数が増えてしまい両者が区別がしにくいので、それを区別するためにこのようなシンタックスになったのでしょう。
ここで気になるのはブラウザの対応状況ですが、結論から言ってしまうとコロン2つの書き方は現状ではやめておいたほうが無難です。何故ならばIE8がコロン二つのCSS3の書き方に対応してないからです。またおまえか！IEぃぃぃ！
他のChromeやFirefoxなどモダンブラウザではコロン二つの書き方に対応しています。
頻出数値文字参照（個人的なもの）
自分が使ったことがあるものを以下に追加していきます。ここに載っていないもので使いたいものがある場合はこちらのサイトを使わせてもらって調べる。
| 単語 | 読み方 | 数値文字参照 | contentプロパティ用 |
|---|---|---|---|
| | | バーティカルバー | |
|
| ■ | 黒四角 | |
|
| & | アンパサンド | |
|
| © | コピーライト | |
|
| ▼ | 逆黒三角 | |
|
| < | より小さい | |
|
| > | より大きい | |
|
| ◆ | 黒ひし形 | |
|