如何受益于CSS生成内容和计数器 (一)

CSS2规范中首次引入生成的内容。几年来，由于不一致的浏览器支持，该功能被Web开发人员使用相对较少。随着2009年的Internet Explorer8
版本发布，CSS生成内容被重新发现，并首次采用了许多有趣的应用。在本文中，我们将讨论CSS生成内容的一些可能的用途。

CSS生成内容是什么？

在技术方面，产生的内容是由CSS创建一个简单的抽象文档树中。这样，在实际应用中，生成的内容只存在于网页的布局文件中。
可以通过JavaScript访问生成的内容是阅读的内容属性的文本值：

var test = document.querySelector('#test');
var result = getComputedStyle(test, ':before').content;
var output = document.querySelector('#output');
output.innerHTML = result;

插入生成的内容
生成的内容可被插入前，后一个元素的实际内容，使用：before和：after伪元素。代表伪元素，我们可以使用下面的伪标记。

<p>
   Start
      Actual content
   End
p>

那么我们的CSS会是：

p:before {
   content: "Start";
}

p:after {
   content: "End";
}

请记住，如果你对CSS3的规格验证CSS文件，：before和：after伪元素应该写成::前::后。否则，将调用CSS验证错误。

正如你可以看到，插入两个字符串的属性内容。这
属性接受以下值：

    没有，正常
    伪内容将不会产生。
    
    这将是一个包含在引号的文本串。
    url（）
    此功能使我们能够将外部资源（通常是图像），background-image属性。
    counter（），counters（）
    这些函数插入计数器（详情见下文）。
    ATTR（attibute）
    此功能使我们能够插入给定元素的属性值。
    open-quote, close-quote, no-open-quote, no-close-quote
    这些值自动生成的引号。

请记住，生成的内容占用的页面空间，它的存在会影响浏览器的父元素的计算。

插入字符串

在前面的例子中，我们插入了两个简单的字符串之前和之后的实际元素的内容。生成的内容，也使我们能够通过escaping插入更加复杂的符号，

p:before {
   content: "\00A7";
   padding-right: 0.2em;
}