css html entity

Question

I'm trying to add an html entity (→ →) using css when a link is hovered with the following css:

#menu1 a:hover:after {
  content: "→";
}

But the output is just → instead of →. The same problem happens when using the decimal (8594) or the entity (rarr).

How do I include an HTML entity with css?

Answer 1

#menu1 a:hover:after {
  content:"\2192 ";
}​

Working example: http://jsfiddle.net/wCzUf/
More details - Can you use HTML entities in the CSS “content” property?
List of HTML entities - http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

Answer 2

That depends on how you include the CSS in your HTML file. Inside an inline stylesheet, the entity should work.

If you have an external stylesheet, you can't use HTML entities. Just put in the character itself ("→"), properly encoded with the .css file's charset. Alternatively, you can use a Unicode escape sequence, in your case "\2192" (the hex value of 8594).

Answer 3

This was already answered before in another question. As per the solution, you need to use escaped Unicode in CSS content property.

#menu1 a:hover:after {
  content: "\002192";  
}