css html entity

7.2k views Asked by At

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?

3

There are 3 answers

1
Māris Kiseļovs On BEST ANSWER
1
Bergi On

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

0
Uzair Sajid On

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