前言：本人便捷博客能力低下，如果看不懂，請聯繫我。帶來不便，多有抱歉。
一、首先我們需要知道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;
}