CSS3中的偽元素:before和:after是非常實用的兩個偽元素，在CSS3出來后，使網(wǎng)頁前端設計人員在頁面設計上更加方便和快捷。配合content屬性，可以在元素的前面或后面插入新元素，content即插入元素的值，這些添加不會出現(xiàn)在DOM中，不會改變文檔內(nèi)容，不可復制，僅僅是在css渲染層加入。所以不要用:before或:after展示有實際意義的內(nèi)容，盡量使用它們顯示修飾性內(nèi)容，例如圖標。

before/after偽類相當于在元素內(nèi)部插入兩個額外的標簽，其最適合也是最推薦的應用就是圖形生成。在一些精致的UI實現(xiàn)上，可以簡化HTML代碼，提高可讀性和可維護性。效果使用參考：

像這種小圖標大多使用before，after來實現(xiàn)，不僅簡單還方便。

before和after的描述如下：

content：輸入要插入的部分內(nèi)容

要在content中插入字母和符號，請用“”括起來并輸入。
要在content中插入圖像和聲音，請輸入url（目標路徑）。

也可以為同一元素指定before和after。

CSS3中before和after等偽元素使用::（雙冒號），但即使只有一個冒號，它在大多數(shù)瀏覽器中也能識別并正常工作。

支持的瀏覽器

支持:: before和:: after偽元素的瀏覽器：Chrome、Firefox3.5~、Safari4~、IE8~、Opera6~。

簡單的實例如下：

在每個 <p> 元素的內(nèi)容之前插入新內(nèi)容：

p:before{ 
content:"臺詞：";
}

可以有如下的定義值：

那么before和after這兩個偽元素有什么區(qū)別呢？

從英文字面上來理解：

before:意思是在什么什么之前，而after:意思是在什么什么之后的意思，區(qū)別起來還是很簡單的。

偽元素before和after的用法：

before和after偽元素必須包含：content:' ';樣式。

例如：

h3::before{content:'\e67d';font-family: "iconfont";font-size:24px;color:red;}

content中引用的是阿里的一個圖標庫，設置了文字樣式，文字大小，文字的顏色?？梢钥闯鯾efore和after偽元素其實和一般的Css的元素是一樣的，可以設置很多樣式，唯一不同的是必須包含content，否則偽元素將不生效。

偽元素before和after運用場景：

比這一般在制作排行榜或者是欄目標題前使用before偽元素，給排行榜添加有序排行美化，引用字體圖標庫給版塊標題添加可視化圖標進行美化。而after用的比較少，一般是應用在清除Div浮動上。

最后解釋一下關于冒號的數(shù)量

有兩種偽元素，: before /：after和:: before / :: after。

在css2中，寫一個冒號，如，: before /：after。

在css3中，寫兩個冒號，例如，:: before / :: after。

由于css3是最新的css，因此也可以說偽元素是:: before / :: after。

對于:: before / :: after，主瀏覽器兼容。

但是，應該注意的是，css3的一部分語法與主瀏覽器并不兼容。