css中的::after和::before已經(jīng)被大量地使用在我們?nèi)粘i_發(fā)中了,使用他們可以使我們的文檔結(jié)構(gòu)更加簡潔。但是很多人對::after和::before仍不是特別了解,究竟他們是做什么的?如何使用他們?什么時候應(yīng)該使用他們?筆者總結(jié)了一些對偽元素的理解和使用經(jīng)驗。
一、概念:
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匹配一個虛擬元素,主要被用于為當(dāng)前元素增加裝飾性內(nèi)容的。他顯示的內(nèi)容是其自身的“content”屬性,默認是內(nèi)聯(lián)元素。
其實::after和::before被引入css中,最核心的目的,還是為了實現(xiàn)語義化。在我們實際開發(fā)時候經(jīng)常有這樣的經(jīng)歷,為了實現(xiàn)一些效果,在文檔中創(chuàng)建了一些沒有實際內(nèi)容的節(jié)點,或者加入輔助樣式的文本,如:
<style> ul{ list-style: