:before 和 :after 的內幕 以及偽類
阿新 • • 發佈：2019-02-18
偽類
VS 偽元素
這兩個概念很容易混淆，即使你Google或者查W3C的資料都不一定搞得清。答案其實很簡單，如下：
偽類：作用物件是整個元素
首先，來看幾個偽類
?
a:link
{color:#111}
a:hover
{color:#222}
div:first-child
{color:#333}
div:nth-child(3)
{color:#444}
|
如你所見，儘管這些條件不是基於DOM的，但結果每一個都是作用於一個完整的元素，比如整個連結，段落，div等等。
偽元素：作用於元素的一部分
還是來看幾個例子：
?
p::first-line
{color:#555}
p::first-letter
{color:#666}
a::before
{content : "hello
world";}
|
如你所見，偽元素作用於元素的一部分：一個段落的第一行 或者 第一個字母。
更加神奇的是可以作用於並未加入HTML的物件，這就是:before 和 :after，也就是本文要說的內容。
:before VS ::before
為什麼有兩種寫法呢？它們的效果一樣麼？
答案是一樣的，來看一個例子：