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.
4 Answers
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
4 Comments
clamp
excellent, thanks! about IE: it's probably another issue on my side then. that class is attached to a li element.
sandeep
If :before is not working in IE8. Then check your doctype. Put this <!DOCTYPE html> in your html
Álvaro González
... where "hex value" means "hexadecimal Unicode code point".
Frank N
...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 is your greatest pal. (ever)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; } 
10 Comments
clamp
i had that before, but then it doesnt validate.
twe4ked
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.
Paul D. Waite
@clamp: what validation error do you get? I pasted odin’s code into jigsaw.w3.org/css-validator/#validate_by_input, and it validated just fine.
clamp
i used utf-8 encoding and it said that dot is an invalid character.
Paul D. Waite
@clamp: what said that the dot is an invalid character? The W3C’s CSS validator says it’s fine.
|
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; } 
1 Comment
clamp
nope sorry if my question was badly formulated, i want them to see the dot character. stackoverflow took the entity and converted it.
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)
•not the•character?