Alex Rivera | Logout

CSS:after encoding characters in content

Asked 2011-02-17T14:56:38.510
62

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?

css unicode css-selectors pseudo-element css-content
Edit
Report

1 Answer

103

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"; }
answered 2011-02-17T14:59:24.700

Your Answer