Using symbols with CSS content element

Within CSS there exists two pseudo tags :after and :before. Well applied to a class or element they can apply formatting to, well, after or before the element in question. A minor controversial inclusion is a property that only exists for these two tags "content:" Using this combination you can add any characters before or after any element or class. So if you have a class of "failed" you can create the css formating of

.failed:before{content: url(images/red-dot.gif);}

and in front of each failed class element would appear this image of a red dot. It's also possible to add text and even style it

.failed:before{content: "Failed"; color: red;}

Now each failed class element will have the word Failed in red letters before it. So far so easy, but what if you want to include something different say a special character like "→"you might expect to be able to do this:

.failed:before{content: "→";}

using the special entity code, but all you'll see is the letters typed. What is needed is to tell the css parser to treat this as actual code rather than as a string and that means escaping it using a "\" as it doesn't understand the & symbol that needs to be omitted and as it still reads the "rarr" as a string the hex version needs to be used instead.

→ is → is &8594; in decimal which is &2192; in hex. So the full CSS coding would be

.failed:before{content: "\2192";}

This will work for any special characters the browser can use.

(Created for Orphi)