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

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

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

具體實現(xiàn)代碼

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

甚至我們能夠設置鼠標hover時候的效果

GIF圖

具體實現(xiàn)代碼

3.hover時的特效

特效1

GIF圖

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

特效2

GIF圖

具體實現(xiàn)代碼

4.清除浮動

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

具體代碼如下

5.分割線

具體代碼

6.css計數(shù)器

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

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

html結構

css樣式

關于css計數(shù)器的更具體的用法如下

具體代碼如下

html結構

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

css樣式

7.畫平行四邊形

代碼如下：

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

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

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

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

具體代碼示例

html代碼

css樣式

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。