疑似要素内での実体参照

HTMLなお話。CSSで疑似要素を使うと、特定のクラスに対してちょっと変わったスタイルの適用ができます。たとえば以下のコードをCSSファイルに書いておきます。

・hoge.css

span.copy:before {
content: "コピー"
}

そして、HTML内で以下のように記述します。（spanタグがブログで変換されてしまうので、括弧を全角で書いてますが、実際は当然半角です）

・foo.html

＜span class="copy"＞AileNoWa. 2008＜/span＞

すると、出力時には以下のようになるのです。

・出力

コピーAileNoWa. 2008

とまあ、これはWebで調べればいくらでも情報があるのですが、この疑似要素のcontent部分に実体参照を使おうとして、ちょと苦戦してしまった。上記の例では"コピー"のように普通の文字列を指定しているが、ここでコピーライトを出そうと"&copy ;"と書いてやると（例ではcopyと;の間にスペースあるけど、本当は不要。ブログで変換されちゃうのを防ぐためにスペース入れてます）

・hoge.css

span.copy:before {
content: "&copy ;"
}

すると、

・出力

&copy ;AileNoWa. 2008

となちゃう…。え～。これの解決方法がなかなか見つからず、疲れてしまった。備忘録としてメモっとく。

解決方法は、 ISO8859-1で定義される番号を16進数6桁で記述してやればOK。6桁じゃないとダメらしいので、足りない分は0で埋めます。コピーライトなら番号169なので、これを16進数に変換して以下のように記述。

・hoge.css
span.copy:before {
content: "\0000A9"
}

これでちゃんと出力されるようになりました。…これって常識？