Using Character Entities In CSS content:

Browser differences have kept a lot of developers (I include myself) from using valuable css features. And, a lot of developers (also including myself) keep avoiding them even after browser evolution has made them perfectly mainstream. It’s true, though, that many people stick with obsolete browsers either because their OS forces them to or because they’re ignorant or stubborn. (More on that in a minute.)

Take CSS-generated content. Prior to version 8, Internet Explorer didn’t handle it well and I removed it from my repertoire, but that was several years ago, things have progressed, and now all major browsers support it, so that we can take full advantage of the :before and :after pseudo-classes to make a more usable page.

For instance, somewhere I saw a large, pale, quotation mark used to designate the beginning of a block-quote, maybe not something needed for usability, block-quotes can be styled to set themselves off from surrounding text easily enough, but the additional treatment looked good and, I think, shows a little respect for the person being quoted.  On my personal blog, FrogsForSnakes (you can look there for how it looks), then, I wrote a style rule that looks something like this:

blockquote:before {
  color: #CCC;
  content: "\201C"; /* U+201C */
  font-size: 3em;
  font-weight: bold;
  line-height: 0;
  margin: 0 5px 0 -20px;
  vertical-align: bottom;

Look at the “content” declaration. That’s an escaped hexadecimal unicode character — if you put an html character entity between the quotes it will display the code, not the character (“content: ‘>’;” prints “>” for instance, not “>”). That’s the way you have to use character entities in css. I refuse to admit how long it took me to figure that out — without help I’d still be scratching my head.