1.背景介绍

css有一个属性叫做content。content只能使用在:after和:before之中。它用于在元素之前或者元素之后加上一些内容
content属性早在CSS2.1的时候就被引入了，可以使用:before以及:after伪元素生成内容。此特性目前已被大部分的浏览器支持
在CSS 3 Generated Content工作草案中，content属性添加了更多的特征，例如：插入以及移除文档内容的能力，以创建脚注，结语，及段落注释。但是目前还没有浏览器支持content的扩展功能。

2.知识剖析

before和after是什么呢？

:before和:after的作用就是在指定的元素内容（而不是元素本身）之前或者之后插入一个包含content属性指定内容的行内元素.需要注意的是如果没有content属性，伪类元素将没有任何作用。但是可以指定content为空，插入的内容默认是一个行内元素，并且在HTML源代码中无法看到，这就是为什么称之为伪类元素的理由，所以也就无法通过DOM对其进行操作。伪类元素也会像其他子元素一样正常继承父元素的一些CSS属性，比如字体等。

3.常见问题

如何使用:after和:before中的content属性呢？

4.解决方案

1.content属性与 :before 及 :after 伪元素配合使用生成文本内容

                
                  h1:before {
                    content: "添加到h1前面！";
                  }
                    h1:after {
                    content: "添加到h1后面！";
                  }
                  
我是标题h1！
                
              添加到h1前面！我是标题h1！添加到h1后面！
            

5.编码实战

demo

6.扩展思考

强大的CSS3 attr()方法。

通过attr()将选择器对象的属性作为字符串进行显示

            
              a:after {
                 content: attr(href);//当使用attr()获取标签属性名的时候，千万不要添加引号!
              }
              此标签的href值是：
            
            此标签的href值是：http://www.jnshu.com
          

7.参考文献

参考一：segmentfault上的css3 content详解

参考二：张鑫旭 CSS content内容生成技术以及应用

参考三：CSS counter计数器

8.更多讨论

content实际上很少的使用，它不可通过DOM使用，它只是纯粹的表象。