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 — sachleen
– sachleen, Commented Aug 5, 2012 at 5: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
– Jared, Commented Aug 5, 2012 at 5:28

Community · Accepted Answer · 2017-05-23 12:34:28Z

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, 2017 at 12:34

CommunityBot

11 silver badge

answered Aug 5, 2012 at 5:27

Māris Kiseļovs

17.3k5 gold badges43 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ndp Over a year ago

I wrote 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.

Ruud · Accepted Answer · 2015-11-01 18:39:23Z

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 1, 2015 at 18:39

Ruud

3,3123 gold badges42 silver badges55 bronze badges

answered Aug 5, 2012 at 5:26

Bergi

671k162 gold badges1k silver badges1.5k bronze badges

1 Comment

ruvim Over a year ago

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.

Community · Accepted Answer · 2017-05-23 12:17:54Z

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, 2017 at 12:17

CommunityBot

11 silver badge

answered Aug 5, 2012 at 5:35

Uzair Sajid

2,1853 gold badges21 silver badges28 bronze badges

Collectives™ on Stack Overflow

css html entity

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related