::after是一個CSS偽元素，使用::after，你可以從CSS裡往頁面上新增內容。雖然最終生成的東西並不是真正的DOM裡的內容，但這些內容能像普通內容一樣顯示，基本下的效果是這樣的：

CSS程式碼

div::after{

content:"你好";

}

HTML程式碼

<div>

  <!--div的內容-->

你好

</div>

::before跟::after完全類似，指示它插入的內容會出現在其他內容之前。這兩者的區別可以簡單描述為：

1、想讓插入的內容出現在其他內容之前，使用::before，否者，使用::after。

2、在程式碼順序上，::after生成的內容也比::before生成的內容靠後，如果按堆疊視角，::after生成的內容會在::before生成的內容之上。

3、字串：content:"字串",特殊自趺床需要轉義或unicode編碼。

4、圖片： content:url(/path/to/images.jpg);圖片會按原尺寸大小的插入，不能改變，因為漸變色實際上也是影象，所以，這些偽元素裡也可以使用漸變色。

5、空：content:"";可以用於清除左右浮動元素，也能夠用於使用背景圖片（這是可以設定高和寬，甚至使用background-size）

6、計數器：content:content(li)； 在列表時計算行數非常方便。

需要注意的是，你不能用他們插入HTML（至少這些HTML程式碼會被轉義輸出）content:"<h1>hello</h1>"；

雙冒號（：：）和單冒號（：：）的區別

所有支援css3的雙冒號語法的瀏覽器都會支援單冒號的語法，但IE8只支援單冒號。建議只使用單冒號，以獲得最佳的瀏覽器支援。

雙冒號市一中新語法，是用來將偽元素選擇器和偽元素區別開，如果不需要IE8支援，就用雙冒號

瀏覽器支援情況：

1、Firefox 3.5- 不支援偽元素的絕對定位。

2、Opera9.2，偽元素的空格會顯示，如同在pre一樣。

3、IE8不支援偽元素裡的z-index。