前言：本人便捷博客能力低下，如果看不懂，请联系我。带来不便，多有抱歉。
一、首先我们需要知道css3新增选择器::before和::after的概念
E::before和E::after
在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。
div::befor {
content:"开始";
}
div::after {
content:"结束";
}
注意
伪元素:before和:after添加的内容默认是inline元素；这个两个伪元素的content属性，表示伪元素的内容,设置:before和:after时必须设置其content属性，否则伪元素就不起作用。
二、实例讲解
我最近发现京东的轮播图切换小点特效，百思不得其解，看了源码之后发现其实非常简单。下面是本人写的一个小demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
body {
background-color: #ccc;
height: 60px;
}
.btn {
display: inline-block;
width: 18px;
height: 18px;
border-radius: 50%;
position: relative;
transition: all 0.35s ease;
}
.btn::after {
content: "";
position: absolute;
top: 4px;
left: 4px;
border-radius: 50%;
width: 6px;
height: 6px;
border: 2px solid red;
border-color: hsla(0,0%,100%,.4);
}
.btn:hover {
background: hsla(0,0%,100%,.2);
}
.btn:hover::after {
content: "";
background-color: #fff;
}
</style>
</head>
<body>
<i class="btn"></i>
</body>
</html>
语言讲解：利用伪元素选择器器给标签插入内容，我们可以理解为给元素中新插入了一个行内标签。我们可以通过定位，以及其他的css操作来控制新增的内容，来达到我们需要的效果。
三、也可以用用来清除浮动
.clearfix:after { content: ".";overfolw：hidden； display: block; height: 0; clear: both; visibility: hidden; }
.clearfix {*zoom: 1;}
.clearfix:before,.clearfix:after {
content:"";
display:table; /* 这句话可以触发BFC
}
.clearfix:after {
clear:both;
}
.clearfix {
*zoom:1;
}