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?

Keslie

I had a simila issue when using ✓. It worked, when I pasted the code into debug console of firefox, but writing the same code in my (utf-8 encoded) file, did not work and showed ✓ on the html-page AND in developer console of the browser. After saving the css file in utf-16 encoding it was working (reason was, this char needs 3 bytes so utf-8 can not handle it correctly) – Womble

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

Newsletter

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) – Keslie

@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. – Newsletter

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

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. – Perquisite

Answer 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) :).

Knipe

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. – Perquisite

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

@BoltClock's answer is better though. – Knipe

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/… – Chlorine

Answer 3

Just want to add that if you want to set dynamically the value of content via the attr() function, the above won't work. See

document.getElementById('wontwork').setAttribute('data-sym', ' \2714 ');
document.getElementById('willwork').setAttribute('data-sym', ' \u2714 ');

button::before {
  content: attr(data-sym);
}
* {
  font-size: 30px
}

<button id='wontwork' data-sym='to-be-replaced'>not rendered</button>
<button id='willwork' data-sym='to-be-replaced'>rendered !</button>

Oina