css - css2/css3 中 "content: "属性的各种可能用途

Question

我试图找到一些关于 css 中 content: 属性的各种可能用途的最新信息，但只能在 2004 年左右的网络古代地下城中找到东西，所以我想我必须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 生成的内容，屏幕阅读器将忽略它。