偽元素 after和 before

2021-08-18 11:28:17 字數 702 閱讀 4164

::after

是乙個css偽元素,使用

::after

,你可以從css裡往頁面上新增內容(不再要在html裡有相應的東西)。雖然最終生成的東西並不是真正的dom裡的內容,但這些內容能像普通內容一樣顯示,基本的效果是這樣的:

css**

div::after

html**

<

div>

你好div

>

::before

跟::after

完全類似,只是它插入的內容會出現在其它內容之前。這兩者的區別可以簡單描述為:

content

的值可以為:

需要注意的是,你不能用它們插入html(至少這些html**會被轉義輸出)。

content: "";

雙冒號(::)和單冒號(:)的區別

所有支援css3的雙冒號(::)語法的瀏覽器都會支援單冒號(:)語法,但ie8只支援單冒號。建議只使用單冒號,以獲得最佳的瀏覽器支援。

雙冒號(::)是一種新語法,是用來將偽元素選擇器和偽元素區別開。如果不需要ie8支援,就用雙冒號(::)吧。

瀏覽器支援情況

都是一些小問題:

css3

偽元素

偽元素 after和 before

after是乙個css偽元素,使用 after,你可以從css裡往頁面上新增內容 不再要在html裡有相應的東西 雖然最終生成的東西並不是真正的dom裡的內容,但這些內容能像普通內容一樣顯示,基本的效果是這樣的 div after 你好div before跟 after完全類似,只是它插入的內容會出...

偽元素 after和 before

after是乙個css偽元素,使用 after,你可以從css裡往頁面上新增內容 不再要在html裡有相應的東西 雖然最終生成的東西並不是真正的dom裡的內容,但這些內容能像普通內容一樣顯示,基本的效果是這樣的 div after 你好 before跟 after完全類似,只是它插入的內容會出現在其...

理解偽元素 Before 和 After

層疊樣式表 css 的主要目的是給html元素新增樣式,然而,在一些案例中給文件新增額外的元素是多餘的或是不可能的。事實上css中有乙個特性允許我們新增額外元素而不擾亂文件本身,這就是 偽元素 你一定聽說過這個詞,尤其是當你一直關注著我們的教程。點此瀏覽原作者的其他文章 事實上,的確有一些css家族...