css2/css3中"content:"属性的各种可能用法

Question

我试图找到一些有关content:css中各种可能的属性用途的最新信息 ,但只能找到2004年orso的网络古人地牢中的内容,所以我想我必须再次在2011年问这个:

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

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

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

如何在不使用任何图像或span标签的情况下通过CSS在UL/LI html列表中设置Bullet颜色

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

li:在{content:"■"之前; 如何在电子邮件文具中将这个特殊字符编码为Bullit？

所以我的具体问题是:除了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中的印刷饰品,因为它们是表现性的.例如,在我的博客中,我将它用于帖子或侧边栏链接之间的饰品.

• 添加图标到超链接,取决于他们指向的位置,例如

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