在CSS中，有两个很好用的伪元素，分别是::before和::after。也许你在看别人的代码时，会看到:before和:after，那是为了兼容早期的浏览器。W3C为了将伪类和伪元素加以区分，在伪元素前面加了两个冒号。
1.伪元素
::before用来将内容插入到元素的前面::after用来将内容插入到元素的后面
::before和::after中有一个content()属性用来生成内容。
<style type="text/css">
.item::before{
content : 'Hello ';
}
.item::after{
content : " world"
}
</style>
<div class="item">item</div>
运行效果如下：
2.CSS计数器
CSS有一个计数功能，就像使用变量一样，它有以下4个属性：counter-reset 创建或重置计数器；需要注意的是：当第一次使用counter-reset时，表示创建；当第二次使用时，表示重置，但需要注意的是，是同一个元素才会重置。
counter-increment 增长计数器；
content 生成内容；
counter() 将计数器的值添加到元素中。
接下来，看一个最简单的计数器示例：
<style type="text/css">
ul{
list-style:none;
counter-reset : num;
}
ul li::before{
counter-increment : num;
content : 'List-' counter(num) '-item ';
}
</style>
<ul>
<li>AAAAAAAA</li>
<li>BBBBBBBB</li>
<li>CCCCCCCC</li>
</ul>
运行效果如下：
再看一个，稍微复杂点的示例：
<style type="text/css">
body{
counter-reset : num1;
}
h1::before{
counter-increment : num1;
content : 'The ' counter(num1) ' ';
}
h1{
counter-reset : num2;
}
h2::before{
counter-increment : num2;
content : 'content ' counter(num1) '.' counter(num2);
}
</style>
<h1>Title</h1>
<h2>这是一段内容。</h2>
<h2>这是一段内容。</h2>
<h1>Title</h1>
<h2>这是一段内容。</h2>
<h1>Title</h1>
<h2>这是一段内容。</h2>
<h2>这是一段内容。</h2>
<h2>这是一段内容。</h2>
运行结果如下：
<style type="text/css">
body{
counter-reset : num;
}
input:checked{
counter-increment : num;
}
p::after{
content : counter(num) '个'
}
</style>
<body>
CSS3<input type="checkbox">
HTML5<input type="checkbox">
Javascript<input type="checkbox">
<p>你一共选择了</p>
</body>
运行结果如下所示：
<style type="text/css">
body{
counter-reset : num;
}
input:nth-of-type(1):checked{
counter-increment : num 5;
}
input:nth-of-type(2):checked{
counter-increment: num 2;
}
input:nth-of-type(3):checked{
counter-increment:num 7;
}
input:nth-of-type(4):checked{
counter-increment: num 1;
}
p::after{
content : 'Count: ' counter(num)
}
</style>
<body>
5<input type="checkbox">
2<input type="checkbox">
7<input type="checkbox">
1<input type="checkbox">
<p></p>
</body>
运行结果如下：
3.content的其它用途
在content中还有两个值：attr()插入标签属性值；
url()插入一个外部资源(图片，音频，视频或浏览器支持的其它任何资源)。
<style type="text/css">
.box a{
position:relative;
}
.box a img{
width:200px;
}
.box a::after{
content : attr(title);
position:absolute;
bottom:0;
left:0;
width:100%;
height:25px;
line-height:25px;
text-align:center;
background-color:#ccc;
color:#fff;
}
</style>
<body>
<div class="box">
<a href="javascript:;" title="这是一个logo">
<img src="images/logo.png">
</a>
</div>
</body>
运行结果如下：
