:before，::before這倆寫法，估計有些人很納悶，這兩者有什麼區別
其實:before，::before這兩種寫法都是等效，只是:befor是CSS2的寫法，::before是CSS3的寫法。雙冒號(::)這是CSS3 規範中的要求，目的是爲了區分僞類和僞元素，大多數瀏覽器都支持這兩種表示方式。單冒號(:)用於 CSS3 僞類，雙冒號(::)用於 CSS3 僞元素。對於 CSS2 中已經有的僞元素，例如 :before，單冒號和雙冒號的寫法 ::before 作用是一樣的。一般情況下爲兼容性考慮使用單冒號(:)。
僞類選擇器（這裏的僞類選擇器等效於文中所涉及到的僞類）與我們常用的類選擇器的區別是：類選擇器可以隨便起名，譬如“p.right”，然後在頁面p標籤的class類中加入類“right”，但是僞類選擇器是CSS中已經定義好的選擇器，不能隨便起名。下面是一些我們常見的僞類選擇器：
:active —— 樣式添加到正在被激活的元素
:focus —— 樣式添加到獲得焦點的元素
:hover —— 樣式添加到鼠標懸浮的元素
:link —— 樣式添加到未被訪問過的鏈接
:visited —— 樣式添加到已經訪問過的鏈接
:first-child —— 樣式添加到第一個子元素
:lang —— 樣式添加到指定lang語言的標籤
理解僞類可以通過選擇器找到那些不存在與DOM樹中的信息
a:link {color: #FF0000} /* 未訪問的鏈接 */
a:visited {color: #00FF00} /* 已訪問的鏈接 */
a:hover {color: #FF00FF} /* 鼠標移動到鏈接上 */
a:active {color: #0000FF} /* 選定的鏈接 */
鏈接的不同狀態都可以不同的方式顯示，這些狀態包括：活動狀態，已被訪問狀態，未被訪問狀態，和鼠標懸停狀態。顯然這個些狀態並沒有存在DOM樹的信息裏面。
僞元素 - Pseudo-elements
僞元素在DOM樹中創建了一些抽象元素，這些抽象元素是不存在於文檔語言裏的（可以理解爲html源碼）。比如：documen接口不提供訪問元素內容的第一個字或者第一行的機制，而僞元素可以使開發者可以提取到這些信息。並且，一些僞元素可以使開發者獲取到不存在於源文檔中的內容（比如常見的::before,::after）。
上面段話是僞元素的清晰定義，也是僞元素與僞類最大的區別。簡單來說，僞元素創建了一個虛擬容器，這個容器不包含任何DOM元素，但是可以包含內容。另外，開發者還可以爲僞元素定製樣式。
常見的僞元素種類：
:first-letter —— 樣式添加到文本首字母
:first-line —— 樣式添加到文本首行
:before —— 樣式添加到元素之前
:after —— 樣式添加到元素之後
僞元素的由兩個冒號::開頭，然後是僞元素的名稱，使用兩個冒號::是爲了區別僞類和僞元素（CSS2中並沒有區別）。當然，考慮到兼容性，CSS2中已存的僞元素仍然可以使用一個冒號:的語法，但是CSS3中新增的僞元素必須使用兩個冒號::。
例子
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
.wrap{
margin-top:30px;
text-align:center;
}
.jiantou{
display:inline-block;
padding:10px;
background:#2E963D;
color:#FFF;
border-radius:8px;
position:relative;
}
/* 下箭頭 */
.jiantou:after{
display:inline-block;
content:'';
border-width:6px;
border-style:solid;
border-color: transparent transparent transparent #ff4d4d;
margin-left: 6px;
/* 定位 */
/* position:absolute; */
/* left:40%;
top:100%; */
}
/* 上箭頭 */
.jiantou:before{
display:inline-block;
content:'';
border-width:6px;
border-style:solid;
border-color:transparent #ff4d4d transparent transparent;
margin-right: 6px;
/* 定位 */
/* position:absolute; */
/* left:40%;
top:-16px; */
}
</style>
</head>
<body>
<div class="wrap">
<span class="jiantou">LIUCHUAN</span>
</div>
</body>
</html>
注意：一個選擇器只能使用一個僞元素，並且僞元素必須處於選擇器語句的最後。
小結
1.僞類的效果需要一個實際的類才能達到，而僞元素需要一個實際的元素才能達到。
2.僞類可以同時運用多個，而僞元素只能一次用一個。
3.在CSS3中，僞類用一個冒號:，僞元素用兩個冒號::。
4.爲兼容性考慮需要使用一個冒號的格式。