Question

我正在尝试找到一些关于css中content:属性的各种可能用途的最新信息，但只能找到2004年orso的网络古人地下城的东西，所以我想我必须在2011年问这个再次：

p:before {
content: url(dingdong.png);
}

p:before {
content: "some text ";
}

我对:before选择器以及content:属性都很陌生，并且在这个问题上偶然听到了这个问题，一位可爱的女士非常有创意地回答了这个问题：

How to set Bullet colors in UL/LI html lists via CSS without using any images or span tags

只是发现内容的实际编码可能会出现一些问题：

li:before{ content: "■"; } How to Encode this Special Character as a Bullit in an Email Stationery?

所以我的具体问题是：除了url()和"text"之外还有其他可能性吗？非常感谢您的建议和想法。

Answer 1

哦，太多了，无法列出。一些最常见的案例是：

包含counter()功能的特殊编号，以及counter-reset和counter-increment属性

纯CSS clearfix：

.foo:after {
    content: "";
    display: block;
    clear: both;
}

显示属性，例如打印打印样式表中超链接的URL
```
a[href]:after {
    content: ' (' attr(href) ') ';
}
```
添加不应该在HTML中的印刷饰品，因为它们是表现性的。例如，在我的blog中，我将它用于帖子或侧边栏链接之间的饰物。

根据超链接指向的位置添加图标，例如

a[href^="http://twitter.com/"]:before {
    content: url('twitter-icon.png');
}

添加指针以制作仅限CSS的语音气泡：

.bubble {
    position: relative;
    background: silver;
}

.bubble:after {
    content: "";
    border:10px solid transparent;
    border-top-color:silver;
    position: absolute;
    bottom:-20px
}

还有很多其他人。

请注意：如果某些内容不是表现形式，那么它应该在您的HTML中。用户将无法选择CSS生成的内容，屏幕阅读器将忽略它。

Answer 2

您也可以使用计数器。见http://www.w3schools.com/css/tryit.asp?filename=trycss_content_counter

您还可以显示所选元素的特定属性。见http://jsfiddle.net/EcnM2/

您还可以添加或删除开始和结束引号。

w3schools内容属性列表：http://www.w3schools.com/css/pr_gen_content.asp

Answer 3

屏幕阅读器不会感知生成的内容，因此请注意可访问性问题 content非常有用，但有些情况下，此文本应该在HTML代码中，因为它传达信息并且不仅仅是装饰性的（有点像CSS中的背景图像和非信息性img空的alt属性）

：之后，内容可以用作clearfix，没有额外的div
：之前和之后：将多个背景（最多3个/元素本身）带到不了解CSS3功能的浏览器。

编辑：忘记了Eric Meyer在A List Apart中关于printing the href attribute of links的文章以及他们在内容的帮助下的文本（后面跟着JS improvement，fyi）

css2 / css3中“content：”属性的各种可能用法

3 个答案: