CSS HTML 实体

Question

我试图使用以下CSS在链接悬停时添加一个HTML实体（→ →）：

#menu1 a:hover:after {
  content: "→";
}

但输出结果仅为→而非→。当使用十进制（8594）或实体（rarr）时，同样会出现此问题。

我该如何在CSS中包含HTML实体？

- Christopher

---

可能是使用CSS内容添加HTML实体的重复问题。 - sachleen

我会考虑添加一个更有意义的标签，特别是entity，因为这个实体条目对于这个问题来说并不重要（除非我弄错了）。否则，这是一个有趣的问题，我甚至没有通过CSS考虑过这个问题。 - Jared

Answer 1

#menu1 a:hover:after {
  content:"\2192 ";
}​

工作示例：http://jsfiddle.net/wCzUf/
更多细节-CSS“content”属性中可以使用HTML实体吗？
HTML实体列表-http://en.wikipedia.org/wiki/List_of_XML_and_HTML_character_entity_references

- Māris Kiseļovs

---

我编写了amp-what.com来帮助整理实体列表。在右侧，有按钮可以选择如何显示结果：html、css、unicode等。 - ndp

Answer 2

这取决于你如何在HTML文件中引入CSS。在内嵌样式表中，该实体应该有效。

如果你有一个外部样式表，你不能使用HTML实体。只需使用字符本身（"→"），并用.css文件的字符集进行正确编码。或者，你可以使用Unicode转义序列，在你的情况下是"\2192" （十六进制值为8594）。

- Bergi

---

在内联样式中，实体在application/xhtml+xml的情况下起作用，在text/html内容类型的情况下不起作用。 请注意，Content-Type HTTP头优先于http-equiv元标签。 - ruvim

Answer 3

这个问题之前已经在另一个问题中得到了回答。根据解决方案，您需要在CSS内容属性中使用转义的Unicode。

#menu1 a:hover:after {
  content: "\002192";  
}

- Uzair Sajid