:after  和  :before其实已经比较熟了，但是一直只是会用，今天来做个总结。

首先说说:after 和 ::after，这两个其实区别不大，个人感觉，只是官方为了区别伪类和伪元素。有一个冒号的一般代表伪类如:hover。两个的代表伪元素。所有浏览器都支持一个冒号或者两个冒号，也就是说:after和::after在绝大多数情况下能够互换。只不过:after是CSS2里面的，::after是CSS3里面的，所以如果你想在ie8里面使用after的话，就只能写一个冒号了。

那么有什么作用呢，一般就是用来在元素的最前面或者最后面来添加一些小东西，比如icon。但是利用伪元素添加的内容是不属于DOM的，所以一些读屏软件是读不到的，另外也是不支持事件绑定的。

after，before和content是好基友，content只能作用于伪元素，不能作用于一般的DOM元素。content添加的内容默认是inline，当然content的内容样式多种多样，引用一句话

The content inserted using the content property can be string(s) of text, glyphs, images, counters (for styling lists), or quotes

content: normal | none | [ 
     
       | 
      
        | 
       
         | attr(
        
         ) | open-quote | close-quote | no-open-quote | no-close-quote ]+ | inherit
        
       
      
     

添加了content内容 后，就可以像操作普通DOM元素一样给它添加样式了。

可以看到content的内容中可以用来插入图片，利用这个特点我们我们可以制作多层背景啊！

代码示例在此：

还可以干嘛呢！计数器啊

     
        
      
       d
      
        
      
       j
      
        
      
       l
      
    
     

.counter{
                   counter-reset: counterTest;            }                        .counter div{
                   counter-increment: counterTest 1;            }                        .counter div:before{
                   content: counter(counterTest);            }

上面是简单的用法

这里有一些示例：

还能做什么呢！

然后就是运用到打印上面。显示打印链接：

@media print {
       a[href]::after {        content: attr(href);    }}

 

参考文档：