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ū)分偽元素和偽類;但為了向上兼容,現(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元素類型
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)手試試看偽元素的妙用技巧吧。