Special characters in CSS generated content (::before, ::after)

If you do CSS, you may be familiar with the ::before pseudo-element.  Have you ever tried using it to insert an unusual character?  I did today, and it took about 20 minutes to figure it out.  Here’s here to do it.

See, you can’t use an HTML/XHTML entity like this, because it actually inserts the ampersand and all:

#metaInfo::before {
  content: "⇓";
  display: inline;
}

Turns out you have to put in an escaped reference to the hexadecimal Unicode character value.

#metaInfo::before {
  content: "\21D3"; /*Hexadecimal for Unicode down arrow (⇓)*/
  display: inline;
}

The fact you cannot use HTML entities in generated content does not seem to be spelled out in the W3C specs, though it is hinted at in the section on generated content.

(FYI: Some people use :before instead of ::before.  While the W3C may have been ambiguous about this type of thing in the past, it is now understood that :foo represents a pseudo-class and ::foo represents a pseudo-element.