層疊樣式表(css)的主要目的是給html元素新增樣式，然而，在一些案例中給文件新增額外的元素是多餘的或是不可能的。事實上css中有乙個特性允許我們新增額外元素而不擾亂文件本身，這就是「偽元素」。
你一定聽說過這個詞，尤其是當你一直關注著我們的教程。點此瀏覽原作者的其他文章
事實上，的確有一些css家族的成員(css選擇器)被分類為偽元素比如：:first-line, :first-letter, ::selection, :before and :after。但是，就本文而言，我們將把我們**的範圍限制在:before 和 :after這兩個元素上。因此，本文中的「偽元素」將特指這兩個偽元素(:before 和 :after)，我們將從基礎入手，來研究這個獨特的主題。
關於語法和瀏覽器支援
偽元素實際上在css1中就存在了，但是我們現在所討論的:before和:after則發布於css2.1中。在最初，偽元素的語法是使用「:」(乙個冒號)，隨著web的發展，在css3中修訂後的偽元素使用「::」(兩個冒號)，也就是::before 和 ::after—以區分偽元素和偽類(比如:hover，:active等)
然而，無論你使用單冒號還是雙冒號，瀏覽器都將能識別它們。由於ie8只支援單冒號的格式，安全起見如果你想要更廣泛的瀏覽器相容性那麼還是使用單冒號的格式吧!
它是做什麼的
簡而言之，偽元素將會在內容元素的前後插入額外的元素，因此當我們新增它們時，使用以下的標記方式，他們在技術上是平等的。
:beforethis the main content.
:after
但是這些元素實際上並不在文件中生成。它們將在外部可見，但是你將不會在文件的源**中找到它們，因此，實際上它們是「虛假」的元素。
使用偽元素
使用偽元素是相對容易的，:before將會在內容之前「新增」乙個元素而:after將會在內容後「新增」乙個元素。在它們之中新增內容我們可以使用content屬性。
舉例來說，下面的**片段將在引用的之前和之後分別新增新增乙個引號。
偽元素樣式
儘管作為「虛假」的元素，事實上偽元素表現上就像是「真正」的元素，我們能夠給它們新增任何樣式，比如改變它們的顏色、新增背景色、調整字型大小、調整它們中的文字等等。
指定偽元素尺寸
由於已經設定float，所以無需設定display:black。
關聯背景影象
我們也可以替換用替換內容而不是只有純文字。儘管content屬性提供了 url()來插入, 但是在更多的例項中，我更傾向於使用背景(background)屬性從而更好的控制。
然而，正如你能夠從上面的**片段中看到的，我們仍舊宣告了content屬性，而且此時使用了空字串。content屬性是必須的而且應該經常被應用。否則，偽元素無論如何都無法正常工作。
結合偽類
儘管有不同型別的偽x(偽元素、偽類)，我們可以使用偽類連同偽元素一起放入乙個css規則中，例如，如果我們希望當我們的滑鼠移到blockqoute上時，引號的背景色能夠略微變深。
新增過渡效果
我們甚至可以在偽元素上應用transition屬性來建立優美的顏色過渡效果。
transition: all 350ms;-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;
更多的靈感
為了激發你的靈感，我們已經選擇了三個很酷的例子，可以在web設計上給你很多主意。
迷人的陰影(
在這個教程中 paul underwood 解釋了如何建立更加逼真和吸引人的陰影效果。
使用 偽元素:before 和 :after 。它們兩個都是絕對定位，而且使用負z-index來放置到後方實現陰影效果。
3d按鈕
這是乙個非常聰明的實現，利用偽元素結合css3 box-shadow 來繪製乙個令人吃驚的3d按鈕，僅僅使用了css和單一的錨文字。偽元素:before 被用來在按鈕的左側新增數字「1」。
疊加影象效果
使用偽元素來僅僅依靠乙個標籤建立乙個「凌亂的」疊加影象效果也是可能的。偽元素用於建立乙個疊加的錯覺，通過使用z-index負值使「疊加」的在真正的後面來實現。
結論
偽元素很酷同時也是可應用到實際工作中的，基本上，每乙個我們所新增的元素都不會干擾現有的html結構，而且偽元素可以做到 幾乎所有我們能想到的事情。
實際上有一些偽元素的改進工作,目前逐步進行，比如偽元素巢狀div::before::before 以及多重偽元素div::before(3) 。很顯然，在未來的web設計中，這些改進會讓我們的設計有更多的形式(更多的可能性)。然而，他們將會在最新的瀏覽器中得到支援，讓我們現在耐心的等待吧!
理解偽元素 Before 和 After
層疊樣式表 css 的主要目的是給html元素新增樣式，然而，在一些案例中給文件新增額外的元素是多餘的或是不可能的。事實上css中有乙個特性允許我們新增額外元素而不擾亂文件本身，這就是 偽元素 你一定聽說過這個詞，尤其是當你一直關注著我們的教程。點此瀏覽原作者的其他文章 事實上，的確有一些css家族...
理解before和after偽元素
層疊樣式表 css 的主要目的是給html元素新增樣式，然而，在一些案例中給文件新增額外的元素是多餘的或是不可能的。事實上css中有乙個特性允許我們新增額外元素而不擾亂文件本身，這就是 偽元素 關於語法和瀏覽器支援 偽元素實際上在css1中就存在了，但是我們現在所討論的 before和 after則...
理解偽元素 before 和 after
層疊樣式表 css 的主要目的是給html元素新增樣式，然而，在一些案例中給文件新增額外的元素是多餘的或是不可能的。事實上css中有乙個特性允許我們新增額外元素而不擾亂文件本身，這就是 偽元素 你一定聽說過這個詞，尤其是當你一直關注著我們的教程。點此瀏覽原作者的其他文章 事實上，的確有一些css家族...