CSS:after encoding characters in content

Question

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?

Solution 1

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

Solution 2

Why do you want to encode those characters anyway? Remember, you're writing CSS, not HTML. Your code:

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

is perfectly valid, as long as you save the file with UTF-8 encoding and send the appropriate header:

Content-Type: text/css; charset=utf-8

Encoding characters is only used in HTML so that there is no ambiguity between content and tags. Thus, you would encode< as < so that the browser doesn't think it's the beginning of a tag. Stuff like ↓ are just commodities for people who don't know how to use utf-8 (or can't, for whatever reason) :).

Comments

[theorise]

Oh that works, awesome thank you. Out of interest where did you find the UTF-8 escape sequences. I have never seen anything like that before. (Waiting the time limit to accept the answer)

[BoltClock]

@danixd: On Windows there is Character Map (found in All Programs > Accessories > System Tools). You should be able to find tables of UTF-8 characters and their escapes by searching the Web too.

[snobojohan]

Here's an online chart: htmlhelp.com/reference/html40/entities/symbols.html

[TheCuBeMan]

In this page with conversions table, there should be an additional column for having the values also for CSS' "content" definition. For example: ƒ in HTML's Hex value is "\192" for CSS content, and so on.

[TheCuBeMan]

But why not having the content encoded in order to be as compatible as possible?? True, the encoded value will not be "readable" when viewing the code later (or by another developer), but you can always add comments for that... AND in this case, you won't need to remember to save the entire in UTF/Unicode.

[France Benoit]

Event 7 years after your answer is still usefull. Thank you so much !

[Felix]

@BoltClock's answer is better though.

[albert]

interoperability is one reason for encoding. why do you not want to encode those characters anyways? mathiasbynens.be/notes/css-escapes w3.org/International/questions/qa-css-charset davidsimpson.me/2014/02/04/…