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: "&dArr;";
  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 (&dArr;)*/
  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.

Page Outdated! Comments disabled!

As do many people using Drupal to power their website, I get a lot of comment spam, and Drupal's spam filter is horrible! So I have permanently disabled comments on old.alanhogan.com. Try the new version of this page (which may not exist, but should if this page actually has content besides a list of other articles).

Consider using my contact form to get in touch. And remember that AlanHogan.com is live and old.alanhogan.com is here as a backup only, and a stopgap measure because some AlanHogan.com functionality is not implemented yet.