7

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

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

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

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

如何在不使用任何图像或跨度标签的情况下通过 CSS 在 UL/LI html 列表中设置项目符号颜色

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

li:before{ content: "■"; } 如何将此特殊字符编码为电子邮件信纸中的 Bullit？

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

4

3 回答 3

14

哦，太多了，就不一一列举了。一些最常见的情况是：

  • 特殊编号，带counter()函数，以及counter-reset和counter-increment属性

  • 纯 CSS clearfix 具有：

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

  • 显示属性，例如打印打印样式表中超链接的 URL

    a[href]:after {
    content: ' (' attr(href) ') ';
}

  • 添加不应出现在 HTML 中的印刷装饰，因为它们是展示性的。例如，在我的博客中，我将它用于帖子或侧边栏链接之间的装饰。

  • 将图标添加到超链接，具体取决于它们指向的位置，例如

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

于 2011-03-16T04:11:14.743 回答
1

您也可以使用计数器。请参阅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

于 2011-03-16T03:52:09.167 回答
1

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

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

编辑：忘记了 Eric Meyer 在 A List Apart 中关于在内容的帮助下打印链接的 href 属性及其文本的文章（随后是JS 改进，仅供参考）

于 2011-03-16T03:53:10.707 回答