css2/css3 中“content:”属性的各种可能用途答案

【问题标题】：Various possible uses of the "content: " property in css2/css3css2/css3 中“content:”属性的各种可能用途
【发布时间】：2011-07-16 07:12:15
【问题描述】：

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

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

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

我对@987654326@ 选择器和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"，还有其他可能性吗？
非常感谢您的建议和想法。

【问题讨论】：

content 不是选择器。这是一个属性。
@Bolt，感谢您的更正！
除了常见的用途外，还有许多不寻常和实际的用途。对于这样一种实际的、不寻常的用途，请参阅stackoverflow.com/questions/4986944/…

标签： css css-content

【解决方案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 生成的内容，屏幕阅读器将忽略它。

【讨论】：

在 Markdown 中将代码块放在列表中是一件很痛苦的事情。您需要将代码块再缩进一层，每行总共缩进 8 个空格。我已经为你编辑了你的帖子 - 现在看起来好多了！

【解决方案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

【讨论】：

【解决方案3】：

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

:after 和 content 可以用作 clearfix 没有额外的 div
:before 和 :after 为不理解 CSS3 功能的浏览器带来多个背景（最多 3 个/元素本身）。

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

【讨论】：