1.定義
偽元素用于創(chuàng)建一些不在文檔樹中的元素，并為其添加樣式。比如說，我們可以通過:before :after來在一個(gè)元素前、后增加一些文本，并為這些文本添加樣式。雖然用戶可以看到這些文本，但是這些文本實(shí)際上不在文檔樹中。
2.偽元素的單雙冒號
在CSS2之前規(guī)范不明確的時(shí)，偽元素使用單冒號(:)來表示;
在CSS3規(guī)范中的要求使用雙冒號(::)表示偽元素，以此來區(qū)分偽元素和偽類;但為了向上兼容，現(xiàn)在用單冒號(:)也可以的。
3. 使用場景
下面運(yùn)用before和after在元素前面和后面插入偽元素，實(shí)現(xiàn)一些有意思的小效果，代碼和效果圖附上。
3.1用偽元素實(shí)現(xiàn)插入文字、字體圖標(biāo)庫
3.1.1插入文字：
效果如下：
3.1.2插入iconfont字體圖標(biāo)庫：
根據(jù)效果圖可以看到偽元素是inline元素類型
3.2清除浮動
解決浮動導(dǎo)致的父元素高度塌陷的問題
3.3分割線效果
效果圖：
3.4對話框效果
效果圖如下：
3.5 相片層疊效果
效果圖如下：
總結(jié)
使用偽元素能實(shí)現(xiàn)的效果非常多，也可以減少網(wǎng)頁中標(biāo)簽的使用，一起動手試試看偽元素的妙用技巧吧。
京公網(wǎng)安備 11010802030320號