在CSS中，有两个很好用的伪元素，分别是::before和::after。也许你在看别人的代码时，会看到:before和:after，那是为了兼容早期的浏览器。W3C为了将伪类和伪元素加以区分，在伪元素前面加了两个冒号。

1.伪元素

  ::before用来将内容插入到元素的前面   ::after用来将内容插入到元素的后面   ::before和::after中有一个content()属性用来生成内容。

    
     item
    
复制代码

运行效果如下：

  需要注意的是，大部分浏览器将这两个伪元素默认以行内元素显示，有了这两个伪元素可以减少对标签的使用。

2.CSS计数器

  CSS有一个计数功能，就像使用变量一样，它有以下4个属性：   counter-reset 创建或重置计数器；需要注意的是：当第一次使用counter-reset时，表示创建；当第二次使用时，表示重置，但需要注意的是，是同一个元素才会重置。   counter-increment 增长计数器；   content 生成内容；   counter() 将计数器的值添加到元素中。   接下来，看一个最简单的计数器示例：

    
    
     
AAAAAAAA
    
     
BBBBBBBB
    
     
CCCCCCCC
    
复制代码

运行效果如下：

  它不是根据元素的个数来计算值的，而是根据counter-increment的数量来计算的。   再看一个，稍微复杂点的示例：

Title
这是一段内容。
这是一段内容。
Title
这是一段内容。
Title
这是一段内容。
这是一段内容。
这是一段内容。
复制代码

运行结果如下：

  利用计数器来实现获取input checked选择的数量。

    CSS3    HTML5    Javascript    
你一共选择了
复制代码

运行结果如下所示：

  可以手动更改counter-increment数值大小：

    5    2    7    1    
复制代码

运行结果如下：

3.content的其它用途

  在content中还有两个值：   attr()插入标签属性值；   url()插入一个外部资源(图片，音频，视频或浏览器支持的其它任何资源)。

    
    
        
                             
    
复制代码

运行结果如下：

  伪元素的意义就在于它可以使HTML更加语义化。有时候为了某些效果，不得不添加一些没有意义的标签，而这两个伪元素既能起到这种辅助布局的作用，又不需要添加没有意义的标签。