Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

css html entity

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?

like image 479
Christopher Avatar asked Aug 05 '12 05:08

Christopher


People also ask

How use HTML entity in CSS content?

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.

What is a HTML entity?

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).

What is the &nbsp entity for?

&nbsp 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.


2 Answers

#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

like image 111
Māris Kiseļovs Avatar answered Oct 19 '22 22:10

Māris Kiseļovs


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).

like image 45
Bergi Avatar answered Oct 19 '22 23:10

Bergi