偽元素 after和 before

::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家族...