So I ran into this problem today while attempting to add a special HTML character code to a list item to denote it as the “current” menu item. Those of you who rule the roost in CSS-land probably know this already. Anyway, I assigned the <li> with a class of “current”:

<li class="current">Something Here</li>

I knew I wanted to use CSS’s ::before pseudo-element coupled with the content attribute. So I tried this:

li.current::before { content:'» '; }

Found out pretty quickly that CSS adds whatever is in the content declaration exactly as-is—so I ended up with:

»Something Here

Not exactly what I was shooting for.

A quick Google Search brought me to this post on Alan Hogan’s blog, where he explains that you must use an escaped hexadecimal code within the quotes for any special character you wish to use. Since I wanted to use a right double angle quote followed by a space, I added this to my css file:

li.current::before { content:'\BB\A0'; }

And that did the trick. You can find lists of hexadecimal character codes all over the place, but I used this one, for what it’s worth.