CSS中主要的伪元素有四个：before/after/first-letter/first-line，在before/after伪元素选择器中，有一个content属性，能够实现页面中的内容插入。
插入纯文字

content:"插入的文章"，或者content:none不插入内容
html:

XML/HTML Code复制内容到剪贴板

1. 这是h1

     

2. 这是h2

     

css

CSS Code复制内容到剪贴板

1. h1::after{   
2.     content:"h1后插入内容"  
3. }   
4. h2::after{   
5.     content:none  
6. }  

运行结果：
https://jsfiddle.net/dwqs/Lmm1r08x/
嵌入文字符号

可以使用content属性的open-quote属性值和close-quote属性值在字符串两边添加诸如括号、单引号、双引号之类的嵌套文字符号。open-quote用于添加开始的文字符号，close-quote用于添加结束的文字符号。修改上述的css:

CSS Code复制内容到剪贴板

1. h1{   
2.     quotes:"(" ")";    
3. }   
4. h1::before{   
5.     content:open-quote;   
6. }   
7. h1::after{   
8.     content:close-quote;   
9. }   
10. h2{   
11.     quotes:""" """;    
12. }   
13. h2::before{   
14.     content:open-quote;   
15. }   
16. h2::after{   
17.     content:close-quote;   
18. }  

运行结果：
https://jsfiddle.net/dwqs/p8e3qvv4/
插入图片

content属性也可以直接在元素前/后插入图片
html:

XML/HTML Code复制内容到剪贴板

1. 这是h3

     

css:

h3::after{
    content:url(http://ido321.qiniudn.com/wp-content/themes/yusi1.0/img/new.gif)
}

运行结果：
https://jsfiddle.net/dwqs/c6qk6pkv/
插入元素的属性值

content属性可以直接利用attr获取元素的属性，将其插入到对应位置。
html:

XML/HTML Code复制内容到剪贴板

1. 这是链接    

css:

CSS Code复制内容到剪贴板

1. a:after{   
2.     content:attr(href);   
3. }  

运行结果：
https://jsfiddle.net/dwqs/m220nzan/
插入项目编号

利用content的counter属性针对多个项目追加连续编号.
html:

XML/HTML Code复制内容到剪贴板

1. 大标题

     

2. 文字

     

3. 大标题

     

4. 文字

     

5. 大标题

     

6. 文字

     

7. 大标题

     

8. 文字

     

css:

CSS Code复制内容到剪贴板

1. h1:before{   
2.     content:counter(my)'.';   
3. }   
4. h1{   
5.     countercounter-increment:my;   
6. }  

运行结果：
https://jsfiddle.net/dwqs/2ueLg3uj/
项目编号修饰

默认插入的项目编号是数字型的，1,2,3.。。。自动递增，也能给项目编号追加文字和样式,依旧利用上面的html，css修改如下：

CSS Code复制内容到剪贴板

1. h1:before{   
2.     content:'第'counter(my)'章';   
3.     color:red;   
4.     font-size:42px;   
5. }   
6. h1{   
7.     countercounter-increment:my;   
8. }  

运行结果：
https://jsfiddle.net/dwqs/17hqznca/
指定编号种类

利用content(计数器名，编号种类)格式的语法指定编号种类，编号种类的参考可以依据ul的list-style-type属性值。利用上述的html，css修改如下：

CSS Code复制内容到剪贴板

1. h1:before{   
2.     content:counter(my,upper-alpha);   
3.     color:red;   
4.     font-size:42px;   
5. }   
6. h1{   
7.     countercounter-increment:my;   
8. }  

运行结果：
https://jsfiddle.net/dwqs/4nsrtxup/
编号嵌套

大编号中嵌套中编号，中编号中嵌套小编号。
html:

XML/HTML Code复制内容到剪贴板

1. 大标题

     

2. 文字1

     

3. 文字2

     

4. 文字3

     

5. 大标题

     

6. 文字1

     

7. 文字2

     

8. 文字3

     

9. 大标题

     

10. 文字1

      

11. 文字2

      

12. 文字3

      

css:

CSS Code复制内容到剪贴板

1. h1::before{   
2.     content:counter(h)'.';   
3. }   
4. h1{   
5.     countercounter-increment:h;   
6. }   
7. p::before{   
8.     content:counter(p)'.';   
9.     margin-left:40px;   
10. }   
11. p{   
12.     countercounter-increment:p;   
13. }  

运行结果：
https://jsfiddle.net/dwqs/2k5qbz51/

在示例的输出中可以发现，p的编号是连续的。如果对于每一个h1后的三个p重新编号的话，可以使用counter-reset属性重置，修改上述h1的css:

CSS Code复制内容到剪贴板

1. h1{   
2.     countercounter-increment:h;   
3.     countercounter-reset:p;   
4. }  

这样，编号就重置了，看看结果：
https://jsfiddle.net/dwqs/hfutu4Lq/

还可以实现更复杂的嵌套，例如三层嵌套。
html:

XML/HTML Code复制内容到剪贴板

1. 大标题

     

2. 中标题

     

3. 小标题

     

4. 小标题

     

5. 中标题

     

6. 小标题

     

7. 小标题

     

8. 大标题

     

9. 中标题

     

10. 小标题

      

11. 小标题

      

12. 中标题

      

13. 小标题

      

14. 小标题

      

css:

CSS Code复制内容到剪贴板

1. h1::before{   
2.     content:counter(h1)'.';   
3. }   
4. h1{   
5.     countercounter-increment:h1;   
6.     countercounter-reset:h2;   
7. }   
8. h2::before{   
9.     content:counter(h1) '-' counter(h2);   
10. }   
11. h2{   
12.     countercounter-increment:h2;   
13.     countercounter-reset:h3;   
14.     margin-left:40px;   
15. }   
16. h3::before{   
17.     content:counter(h1) '-' counter(h2) '-' counter(h3);   
18. }   
19. h3{   
20.     countercounter-increment:h3;   
21.     margin-left:80px;   
22. }  

运行结果：
https://jsfiddle.net/dwqs/wuuckquy/