li{
position: relative;
float: left;
width: 80px;
list-style: none;
text-align: center;
}
.hover>li:before{
content: "";
border-bottom: 2px solid #5ac;
position: absolute;
top: 20px;
width: 0;
left: 50%;
transition: all linear .5s;
padding-bottom: 20px;
}
.hover>li:hover:before{
position: absolute;
width: 100%;
top: 20px;
left: 0;
}
.border{
position: relative;
width:150px;
height: 36px;
border:1px solid black;
border-radius:5px;
background: #eee;
margin-left: 50px;
}
.border:before,.border:after{
content: "";
display: block;
position: absolute;
top:8px;
width: 0;
height: 0;
border:6px solid transparent;
}
.border:before{
left:-11px;
border-right-color: #eee;
z-index:1
}
.border:after {
left: -12px;
border-right-color: black;
z-index: 0
}
-->
HTML5增加了一系列的伪类选择器和伪元素选择器，增加的伪元素选择器有::before、::after、::first-letter(首字母)、::first-line(首行)、::selection(文档高亮部分，如鼠标选中文字)、::backdrop(不常用)。前面四者可能比较常用，会聚集到具体某一元素上，后面两个属于全局的元素。
这里谈一下::before和::after元素的使用。
1、添加元素内容：
<!DOCTYPE html>
<html>
<head>
<title>添加元素内容</title>
<meta charset="utf-8" />
<style>
p{ padding: 20px;}
p:before{content: "我是before添加的内容"; font-weight: bold;}
p:after{content: "我是after添加的内容"; font-style: italic}
</style>
</head>
<body>
<p>我是元素里面的内容</p>
</body>
</html>
在这里添加了元素内边距，判断before和after的位置是包含在content之中还是之外，结果如下：
我是元素里面的内容
添加一个伪元素十分的简单，必须设置content属性，该元素才能展示出来(包括为空"")。并且可以发现伪元素的文字，默认是不能按照文本选择的。
2、展示列表的hover特效(利用伪元素制作动画效果)：
<!DOCTYPE html>
<html>
<head>
<title>展示边框出现效果</title>
<meta charset="utf-8" />
<style>
.hover>li{
position: relative;
float: left;
width: 80px;
list-style: none;
text-align: center;
} .hover>li:before{
content: "";
border-bottom: 2px solid #5ac;
position: absolute;
top: 20px;
width: 0;
left: 50%;
transition: all linear .5s;
padding-bottom: 20px;
}
.hover>li:hover:before{
position: absolute;
width: 100%;
top: 20px;
left: 0;
}
</style>
</head>
<body>
<ul class="hover">
<li>01组</li>
<li>02组</li>
<li>03组</li>
</ul>
</body>
</html>
上面的代码中，content，top及值，width，padding-bottom，transition都是必不可少的，只要有一点偏差就不能达到想要的效果。结果如下：
- 01组
- 02组
- 03组
3、由于这两个伪类属于元素的content部分，所以可以用来对元素进行边框外形的设置：
<!DOCTYPE html>
<html>
<head>
<title>设置边框样式</title>
<meta charset="utf-8" />
<style>
.border{
position: relative;
width:150px;
height: 36px;
border:1px solid black;
border-radius:5px;
background: #eee;
margin-left: 50px;
}
.border:before,.border:after{
content: "";
display: block;
position: absolute;
top:8px;
width: 0;
height: 0;
border:6px solid transparent;
}
.border:before{
left:-11px;
border-right-color: #eee;
z-index:1
}
.border:after {
left: -12px;
border-right-color: black;
z-index: 0
}
</style>
</head>
<body>
<div class="border"></div>
</body>
</html>
通过before和after的定位，利用位置差值和颜色差异，将突出的小角展示出来。结果如下：
利用这两个伪元素可以很方便的为当前元素设置背景、图标、动画效果，而不用在添加额外的元素。