css中的::after和::before已經(jīng)被大量地使用在我們?nèi)粘ｉ_(kāi)發(fā)中了，使用他們可以使我們的文檔結(jié)構(gòu)更加簡(jiǎn)潔。但是很多人對(duì)::after和::before仍不是特別了解，究竟他們是做什么的？如何使用他們？什么時(shí)候應(yīng)該使用他們？筆者總結(jié)了一些對(duì)偽元素的理解和使用經(jīng)驗(yàn)。

一、概念：

1.定義

The CSS ::before(::after) pseudo-element matches a virtual first(last) child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default.

從定義我們知道::before和::after匹配一個(gè)虛擬元素，主要被用于為當(dāng)前元素增加裝飾性?xún)?nèi)容的。他顯示的內(nèi)容是其自身的“content”屬性，默認(rèn)是內(nèi)聯(lián)元素。

其實(shí)::after和::before被引入css中，最核心的目的，還是為了實(shí)現(xiàn)語(yǔ)義化。在我們實(shí)際開(kāi)發(fā)時(shí)候經(jīng)常有這樣的經(jīng)歷，為了實(shí)現(xiàn)一些效果，在文檔中創(chuàng)建了一些沒(méi)有實(shí)際內(nèi)容的節(jié)點(diǎn)，或者加入輔助樣式的文本，如：