:before和:after在css1中就有了，但是在css3中寫法改為了::before 和 ::after以便于和之前做區(qū)別，用哪種方式無所謂，但是IE8只支持 :after這種寫法，所以我平常多用單冒號這種主要能夠?qū)崿F(xiàn)功能有

能夠用偽元素實(shí)現(xiàn)的功能

1.用來做小三角或者小箭頭之類的

具體實(shí)現(xiàn)代碼

2.為一段兒文字添加代碼塊

甚至我們能夠設(shè)置鼠標(biāo)hover時(shí)候的效果

GIF圖

具體實(shí)現(xiàn)代碼

3.hover時(shí)的特效

特效1

GIF圖

具體實(shí)現(xiàn)代碼如下

特效2

GIF圖

具體實(shí)現(xiàn)代碼

4.清除浮動(dòng)

關(guān)于浮動(dòng)的原理和造成的影響，大家可以看此鏈接，這里只討論用偽元素after來清除浮動(dòng)的影響

具體代碼如下

5.分割線

具體代碼

6.css計(jì)數(shù)器

css計(jì)數(shù)器是由css維護(hù)的變量，這些變量可能根據(jù)CSS規(guī)則增加以跟蹤使用次數(shù)

具體實(shí)現(xiàn)代碼如下

html結(jié)構(gòu)

css樣式

關(guān)于css計(jì)數(shù)器的更具體的用法如下

具體代碼如下

html結(jié)構(gòu)

下面是css樣式，注意注釋部分

css樣式

7.畫平行四邊形

代碼如下：

我們發(fā)現(xiàn)，里面的字體也變傾斜了，那么如何避免呢？

在div里面嵌套一層也能完全避免

另外一種就是采用:after和:before來寫了

咱們先看一下邊框設(shè)置為20px寬高為0的div長什么樣子

具體代碼示例

html代碼

css樣式

總結(jié)

以上是生活随笔為你收集整理的对伪元素::after和::before的理解的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。