theorise theorise - 1 year ago 66
CSS Question

CSS:after encoding characters in content

I am using the following CSS, which seems to be working:

a.up:after{content: " ↓";}
a.down:after{content: " ↑";}

The characters however cannot seem to be encoded like this, as the output is literal and shows the actual string:

a.up:after{content: " ↓";}
a.down:after{content: " ↑";}

If I can't encode it, it feels like I should use something such as .append() in jQuery, as that supports the encoding. Any ideas?

Answer Source

To use encoded Unicode characters in content you need to provide either the characters themselves (as you do), or their UTF-8 escape sequences instead of HTML entities:

a.up:after { content: " \2193"; }
a.down:after { content: " \2191"; }