CSS:after encoding characters in content

css unicode css-selectors pseudo-element css-content
theorise picture theorise · Feb 17, 2011 · Viewed 47.3k times · Source

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

BoltClock picture BoltClock · Feb 17, 2011

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"; }

Related questions

Placing Unicode character in CSS content value

I have a problem. I have found the HTML code for the downwards arrow, ↓ (↓) Cool. Now I need to use it in CSS like so: nav a:hover {content:"&darr";} That obviously won't work since ↓ …

Read More
Font Awesome & Unicode

I'm using (the excellent) Font-Awesome in my site, and it's working fine, if I use it this way: <i class="icon-home"></i> But (for some reasons) I want to use it in the Unicode way, like: &…

Read More
CSS: how to add white space before element's content?

None of the following code works : p:before { content: " "; } p:before { content: "&nbsp;"; } How do I add white space before element's content ? Note: I need to color the border-left and the margin-left for semantic use and use the space …

Read More