僞元素::after和::before

僞元素::after和::before

::after是一個CSS僞元素，使用::after，你可以從CSS裏往頁面上新增內容(不再要在HTML裏有相應的東西)。雖然最終生成的東西並不是真正的DOM裏的內容，但這些內容能像普通內容一樣顯示，基本的效果是這樣的:

CSS代碼

div::after {
  content: "你好";
}

HTML代碼

<div>
  <!-- div裏的其它內容 -->
  你好
</div>

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

• 想讓插入的內容出現在其它內容前，使用::before，否者，使用::after。
• 在代碼順序上，::after生成的內容也比::before生成的內容靠後。如果按堆棧視角，::after生成的內容會在::before生成的內容之上。

content的值可以爲：

• 字符串： content: "字符串"; – 特殊字符串需要轉義或unicode編碼。
• 圖片：content: url(/path/to/image.jpg); – 圖片會按原尺寸大小的插入，不能改變，因爲漸變色實際上也是圖像，所以，這些僞元素裏也可以使用漸變色。
• 空： content: ""; – 可以用於清除左右浮動元素，也能夠用於使用背景圖片(這是可以設置高和寬，甚至使用background-size。)
• 計數器： content: counter(li); – 在列表時計算行數非常方便。

需要注意的是，你不能用它們插入HTML(至少這些HTML代碼會被轉義輸出)。content: "<h1>nope</h1>";

雙冒號(::)和單冒號(:)的區別

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

雙冒號(::)是一種新語法，是用來將僞元素選擇器和僞元素區別開。如果不需要IE8支持，就用雙冒號(::)吧。

瀏覽器支持情況

都是一些小問題：

• Firefox 3.5- 不支持僞元素的絕對定位。
• Opera 9.2裏，僞元素裏的空格會顯示，如同在pre裏一樣。
• IE 8 不支持僞元素裏的z-index