你能在 CSS“内容”属性中使用 HTML 实体吗？ [复制]答案

【问题标题】：Can you use HTML entities in the CSS “content” property? [duplicate]你能在 CSS“内容”属性中使用 HTML 实体吗？ [复制]
【发布时间】：2011-11-06 14:51:00
【问题描述】：

我想在 CSS 中使用 HTML 实体，但它向我显示了 &bull;。

.down:before{
    content:"&bull; ";
    color:#f00;
}

另外，为什么上面的代码不能在 IE 中运行？它根本不显示之前的部分。

【问题讨论】：

您希望用户在他们的屏幕上看到&bull; 而不是 • 字符？
我希望用户看到的是 • 而不是 •东西。 stackoverflow 转换了我的 html 实体；）
哪个版本的IE？ 7 及以下版本完全不支持伪元素（:before, :after），8 版本仅部分支持。
jsfiddle.net/Kyle_Sevenoaks/xRJmT 在 Chrome 中看起来不错。 IE 不支持伪选择器 :before.

标签： html css

【解决方案1】：

假设您希望用户看到&bull;，您可以简单地转义该序列，给出：

.down:before{
    content:"\&bull; ";
    color:#f00;
}

至于为什么在 IE7 上不可见，那是因为 IE 不支持生成的内容或 :before 选择器。

编辑提供，要查看实际的项目符号字符，您应该使用：

.down:before{
    content:"\2022";
    color:#f00;
}

JS Fiddle demo.

【讨论】：

不抱歉，如果我的问题表述不当，我希望他们看到点字符。 stackoverflow 获取实体并对其进行转换。
@DavidThomas 不客气 =)

【解决方案2】：

你需要逃避你的实体：

.down:before{
    content:"\&bull; ";
    color:#f00;
}

你在 IE 上看不到它，因为IE doesn't support :before (not :after)

【讨论】：

【解决方案3】：

我猜您希望显示实际的 • 字符，如果是这样，只需使用 • 字符而不是 &bull;。

示例：http://jsfiddle.net/rmjt8/

编辑：我找到了另一个帖子：How can I include a HTML-encoded "content:" character in CSS?

也许这会验证：

.down:before{
    content:"\2022 ";
    color:#f00;
}

【讨论】：

我之前有过，但后来它没有验证。
啊抱歉，我有一段时间没有验证我的 CSS 了；）。只要它是跨浏览器并且我的 Sass 生成，我就是一个快乐的露营者。
@clamp：你得到什么验证错误？我将 odin 的代码粘贴到 jigsaw.w3.org/css-validator/#validate_by_input 中，验证正常。
我使用了 utf-8 编码，它说点是无效字符。
@clamp：点是无效字符是什么意思？ W3C 的 CSS 验证器说没问题。

【解决方案4】：

像这样输入你的子弹特殊字符的十六进制值

div:before{
    content:"\2022";
    color:#f00;
}

检查这个小提琴http://jsfiddle.net/sandeep/HPrkU/1/

注意：在 IE8 中工作前后

【讨论】：

太好了，谢谢！关于 IE：那可能是我这边的另一个问题。该类附加到一个 li 元素。
如果 :before 在 IE8 中不起作用。然后检查您的文档类型。将此放入您的 html
... 其中“十六进制值”表示“十六进制 Unicode 代码点”。
...如果您手头/剪贴板中只有那些 unicode 符号本身，或十进制 html 实体或，或，或...。rishida r12a unicode converter 是您最好的朋友。（曾经）