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

能夠用偽元素實現的功能

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

具體實現代碼

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

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

GIF圖

具體實現代碼

3.hover時的特效

特效1

GIF圖

具體實現代碼如下

特效2

GIF圖

具體實現代碼

4.清除浮動

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

具體代碼如下

5.分割線

具體代碼

6.css計數器

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

具體實現代碼如下

html結構

css樣式

關于css計數器的更具體的用法如下

具體代碼如下

html結構

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

css樣式

7.畫平行四邊形

代碼如下：

我們發現，里面的字體也變傾斜了，那么如何避免呢？

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

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

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

具體代碼示例

html代碼

css樣式

總結

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

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