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: "&#8594;";
}

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?

possible duplicate of [Adding HTML entities using CSS content](http://stackoverflow.com/questions/190396/adding-html-entities-using-css-content) — sachleen, Aug 05 '12 at 05:26
I'd consider adding a more meaningful tag. Specifically `entity` as this entity entry isn't meaningful to this question (unless I'm mistaken). Otherwise interesting question I hadn't even considered this through CSS. — Jared, Aug 05 '12 at 05:28

score 20 · Accepted Answer · edited May 23 '17 at 12:34

20

#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

edited May 23 '17 at 12:34

Community

1
1

answered Aug 05 '12 at 05:27

Māris Kiseļovs

16,957
5
41
48

I wrote [amp-what.com](http://www.amp-what.com) to help sort through the list of entities. On the right, there are button to choose how to display the results: html, css, unicode, etc. – ndp Jul 19 '14 at 14:33

score 2 · Answer 2 · edited Nov 01 '15 at 18:39

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

edited Nov 01 '15 at 18:39

Ruud

3,118
3
39
51

answered Aug 05 '12 at 05:26

Bergi

630,263
148
957
1,375

1

Inside an inline style, entity works in case of `application/xhtml+xml` and doesn't work in case of `text/html` content type. Note that `Content-Type` HTTP header has precedence over `http-equiv` meta tag. – ruvim Jul 18 '15 at 22:22

score 1 · Answer 3 · edited May 23 '17 at 12:17

1

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";  
}

edited May 23 '17 at 12:17

Community

1
1

answered Aug 05 '12 at 05:35

Uzair Sajid

2,135
2
21
28

css html entity

3 Answers3