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