Css: Html Special Character As List Style?

I'm addicted to the character » (»). It just looks very neat and works well on lists... But my problem is, how can put HTML special character like » as CSS list-styles? If I just paste the character to the stylesheet in a text editor and use UTF-8 charset on my document, it won't print out. If I user the code » in the CSS file, it won't be shown as the character but the string "»". So is there any way to do this? I absolitely want to keep the UTF-char sets so changing that is not an option.

You can only choose from the default characters :none, disc, circle, square, decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper, armenian, georgian and a few others i think.

To do what you are trying to achieve you need to make an image of the two arrows and use the;

list-style-image: url('raquo.png');

It isn't as easy to modify, say for example you wanted to change your size of font or color. You could use the pseudo element before;

li{list-style-type: none;}li:before {    content: "Âť";}

That works in FireFox but it doesn't work in I.E. at least to my knowledge unless they've updated it.

Actually what I should have stated is that this is what I've tried:

li:before {   content: "Âť";}

And it doesn't work when i use UTF-8.


And yes this is what I've been using:

list-style-image: url('raquo.png');

but it's a bit tricky as I'd like to use different colours in different lists. And besides it's a bit messy solution.


So the ACTUAL question is: How to put HTM special characters into CSS content: with them working in with UTF-8.