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: " &darr;";}
a.down:after{content: " &uarr;";}

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?

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) — Radon8472, Jan 25 '23 at 11:15

score 100 · Accepted Answer · answered Feb 17 '11 at 14:59

100

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 Feb 17 '11 at 14:59

BoltClock

700,868
160
1,392
1,356

1

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) – theorise Feb 17 '11 at 15:06
3

@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. – BoltClock Feb 17 '11 at 15:08
8

Here's an online chart: http://htmlhelp.com/reference/html40/entities/symbols.html – snobojohan Jun 15 '11 at 12:01
4

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 Nov 02 '15 at 09:21

score 14 · Answer 2 · answered Feb 17 '11 at 15:13

14

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

answered Feb 17 '11 at 15:13

Felix

88,392
43
149
167

2

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. – TheCuBeMan Nov 02 '15 at 09:24
Event 7 years after your answer is still usefull. Thank you so much ! – France Benoit Jul 06 '18 at 07:26
@BoltClock's answer is better though. – Felix Jul 10 '18 at 12:47
1

interoperability is one reason for encoding. why do you not want to encode those characters anyways? https://mathiasbynens.be/notes/css-escapes https://www.w3.org/International/questions/qa-css-charset https://davidsimpson.me/2014/02/04/use-ascii-code-in-css-content-on-pseudo-elements/ – albert Aug 06 '19 at 13:31

score 0 · Answer 3 · answered Sep 06 '19 at 11:20

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>

CSS:after encoding characters in content

3 Answers3

Linked