Menu
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?
479
In CSS you need to use a Unicode escape sequence in place of HTML Entities. This is based on the hexadecimal value of a character. I found that the easiest way to convert symbol to their hexadecimal equivalent is, such as from ▾ ( ▾ ) to \25BE is to use the Microsoft calculator =) Yes.
An HTML entity is a piece of text ("string") that begins with an ampersand ( & ) and ends with a semicolon ( ; ). Entities are frequently used to display reserved characters (which would otherwise be interpreted as HTML code), and invisible characters (like non-breaking spaces).
  is actually one of the most frequently used HTML entities. Nbsp stands for non-breaking space, meaning that strings separated with this entity will not be separated and put into separate lines.
#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
111
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).
45
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
