Can you use HTML entities in the CSS “content” property?

Question

I would like to use HTML entities in CSS, but it shows me the • instead.

.down:before{
    content:"&bull; ";
    color:#f00;
}

Also, why does the above code not work in IE? it does not show the before part at all.

You want the user to see, on their screen, the `•` *not* the `•` character? — David Thomas, Aug 30 '11 at 08:27
i want the user to see the • and not the • stuff. stackoverflow converted my html entity ;) — clamp, Aug 30 '11 at 08:30
Which version of IE? Psuedo-elements (:before, :after) aren't supported at all at 7 and under, and only partially in 8. — Chowlett, Aug 30 '11 at 08:30
http://jsfiddle.net/Kyle_Sevenoaks/xRJmT/ looks fine here in Chrome. IE doesn't support the psuedo selector :before. — Kyle, Aug 30 '11 at 08:30

score 67 · Accepted Answer · edited May 31 '13 at 12:38

67

put hex value of your bullet specail character like this

div:before{
    content:"\2022";
    color:#f00;
}

check this fiddle http://jsfiddle.net/sandeep/HPrkU/1/

NOTE: after & before work in IE8

edited May 31 '13 at 12:38

BoltClock

700,868
160
1,392
1,356

answered Aug 30 '11 at 08:39

sandeep

91,313
23
137
155

excellent, thanks! about IE: it's probably another issue on my side then. that class is attached to a li element. – clamp Aug 30 '11 at 08:48
If :before is not working in IE8. Then check your doctype. Put this in your html – sandeep Aug 30 '11 at 08:52
... where "hex value" means "hexadecimal Unicode code point". – Álvaro González Aug 30 '11 at 09:03
...and in case you have only those unicode symbols itself at hand / in your clipboard, or the decimal html entities or, or, or.... [`rishida r12a unicode converter`](https://r12a.github.io/app-conversion/) is your greatest pal. (ever) – Frank N May 02 '18 at 12:44

score 8 · Answer 2 · edited May 23 '17 at 12:32

8

I'm guessing you want the actual • character displayed, if so simply use the • character instead of •.

Example: http://jsfiddle.net/rmjt8/

Edit: I found another thread: How can I include a HTML-encoded "content:" character in CSS?

Perhaps this will validate:

.down:before{
    content:"\2022 ";
    color:#f00;
}

edited May 23 '17 at 12:32

Community

1
1

answered Aug 30 '11 at 08:32

twe4ked

2,832
21
24

i had that before, but then it doesnt validate. – clamp Aug 30 '11 at 08:34
Ahh sorry, I haven't validated my css in a while ;). As long as it's cross browser and my Sass generates I'm a happy camper. – twe4ked Aug 30 '11 at 08:36
@clamp: what validation error do you get? I pasted odin’s code into http://jigsaw.w3.org/css-validator/#validate_by_input, and it validated just fine. – Paul D. Waite Aug 30 '11 at 08:37
i used utf-8 encoding and it said that dot is an invalid character. – clamp Aug 30 '11 at 08:39
1

@clamp: what said that the dot is an invalid character? The W3C’s CSS validator says it’s fine. – Paul D. Waite Aug 30 '11 at 08:39
this page here: http://validator.w3.org/ the css is inside an html file which is set to utf-8 encoding. – clamp Aug 30 '11 at 08:41
the error message is: The bytes found are not valid values in the specified Character Encoding. Please check both the content of the file and the character encoding indication. – clamp Aug 30 '11 at 08:43
@clamp: in that case, maybe you haven’t saved the file as utf-8. I’ve put up a test page [here](http://www.pauldwaite.co.uk/test-pages/7240520/) with the CSS in ` – Paul D. Waite Aug 30 '11 at 08:47
@Paul, yes that seems to be a problem. encoding of the file was ANSI. – clamp Aug 30 '11 at 08:52
@PaulD.Waite let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/2982/discussion-between-clamp-and-paul-d-waite) – clamp Aug 30 '11 at 08:52

score 3 · Answer 3 · edited Jul 22 '12 at 08:55

3

Assuming that you want the user to see the • you can simply escape that sequence, to give:

.down:before{
    content:"\&bull; ";
    color:#f00;
}

As to why it's not visible on IE7, that's because IE doesn't support generated content or the :before selector.

Edited to offer that, to see the actual bullet character, you should use:

.down:before{
    content:"\2022";
    color:#f00;
}

JS Fiddle demo.

edited Jul 22 '12 at 08:55

Nikola K.

7,093
13
31
39

answered Aug 30 '11 at 08:30

David Thomas

249,100
51
377
410

nope sorry if my question was badly formulated, i want them to see the dot character. stackoverflow took the entity and converted it. – clamp Aug 30 '11 at 08:31

score -1 · Answer 4 · edited Jul 22 '12 at 08:55

-1

You need to escape your entities:

.down:before{
    content:"\&bull; ";
    color:#f00;
}

You cannot see it on IE because IE doesn't support :before (not :after)

edited Jul 22 '12 at 08:55

Nikola K.

7,093
13
31
39

answered Aug 30 '11 at 08:31

Clement Herreman

10,274
4
35
57

Can you use HTML entities in the CSS “content” property?

4 Answers4

Linked