你可以在CSS的“content”属性中使用HTML实体吗？

Question

32

我想在CSS中使用HTML实体，但它显示给我•。

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

另外，为什么上面的代码在IE中无法工作？它根本不显示before部分。

- clamp

2

您希望用户在屏幕上看到的是 • 而不是 • 字符吗？ - David Thomas

我希望用户看到•而不是•的东西。stackoverflow转换了我的HTML实体 ;) - clamp

1

哪个版本的IE？伪元素(:before, :after)在7及以下版本中根本不支持，在8中仅部分支持。 - Chowlett

http://jsfiddle.net/Kyle_Sevenoaks/xRJmT/ 在Chrome中看起来很好。IE不支持伪选择器:before。 - Kyle

4个回答

8

我猜你想要显示实际的•字符，如果是这样，只需要使用•字符而不是•即可。

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

- twe4ked

我以前有过这个问题，但是后来它无法验证。 - clamp

啊抱歉，我有一段时间没有验证我的CSS了;). 只要它是跨浏览器的，并且我的Sass生成正确，那么我就很满意。 - twe4ked

@clamp：你得到了什么验证错误？我将Odin的代码粘贴到http://jigsaw.w3.org/css-validator/#validate_by_input中，它完全通过了验证。 - Paul D. Waite

我使用了UTF-8编码，但它说点号是无效字符。 - clamp

1

@clamp：谁说点号是无效字符的？W3C的CSS验证器显示它是可以的。 - Paul D. Waite

显示剩余5条评论

3

假设您想让用户看到•，您可以简单地转义该序列，以得到以下结果：

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

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

编辑以提供更正：要查看实际的项目符号，请使用：

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

- David Thomas

不好意思，如果我的问题表达得不清楚，我想让他们看到点字符。stackoverflow将实体转换了。 - clamp

-1

你需要转义你的实体：

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

- Clement Herreman

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- sandeep · Accepted Answer

将你的子弹特殊字符的十六进制值放在这里，像这样：

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

注意：在 IE8 中，"after" 和 "before" 功能是有效的。