Encoded Characters in CSS3 Generated Content

A quick, but hopefully informative post on something that took me a little time to work out and I thought might trip a few others up too.

I’m playing with quite a bit of CSS3 at the moment for our new company site. It seemed like a good excuse to put into practice lots of progressive enhancement and the like and so far is going nicely if I do say so my self.

The CSS3 Generated Content Module has some nice little bits in and I decided to use it to put some icons after external link ala wikipedia (but with nicer icons). Actually what I wanted was simply an arrow and I didn’t really need an image for that did I?

Well my first try went a little something like this:

p a[href^="http:"]:after {
    content: "#8594;";
}

Nope, no luck. By the time it hits the browser it’s not what I was looking for. I didn’t think old style named entities would work but what the heck?

p a[href^="http:"]:after {
    content: "→";
}

Nope. As I thought. No luck their either. I also tried the character itself (but forgot to put that in the first post – thanks Joe) but again to no avail.

p a[href^="http:"]:after {
    content: "→";
}

Some digging around and I managed to infer the correct syntax from some hidden away examples about something else.

p a[href^="http:"]:after {
    content: "\2192";
}

You need to use the Unicode encoding. Doh. Job done.