Can you use HTML entities in the CSS “content” pro

问题:

This question already has answers here:

Adding HTML entities using CSS content (9 answers)

Closed 6 years ago.

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

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

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

回答1:

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

回答2:

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

回答3:

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

.down:before{
    content:"\• ";
    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.

回答4:

You need to escape your entities:

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

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