理解偽元素 :before 和 :after

　　層疊樣式表（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只支援單冒號的格式，安全起見如果你想要更廣泛的瀏覽器相容性那麼還是使用單冒號的格式吧！

　它是做什麼的

　　簡而言之，偽元素將會在內容元素的前後插入額外的元素，因此當我們新增它們時，使用以下的標記方式，他們在技術上是平等的。

<p>
<span>:before</span>
 This the main content.
<span>:after</span>
</p>

　　但是這些元素實際上並不在文件中生成。它們將在外部可見，但是你將不會在文件的原始碼中找到它們，因此，實際上它們是“虛假”的元素。

　使用偽元素

　　使用偽元素是相對容易的，:before將會在內容之前“新增”一個元素而:after將會在內容後“新增”一個元素。在它們之中新增內容我們可以使用content屬性。

　　舉例來說，下面的程式碼片段將在引用的之前和之後分別新增新增一個引號。

 

blockquote:before {
 content: open-quote;
}
blockquote:after {
 content: close-quote;
}

　偽元素樣式

　　儘管作為“虛假”的元素，事實上偽元素表現上就像是“真正”的元素，我們能夠給它們新增任何樣式，比如改變它們的顏色、新增背景色、調整字型大小、調整它們中的文字等等。

blockquote:before {
 content: open-quote;
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 background: #ddd;
 float: left;
 position: relative;
 top: 30px;

}
blockquote:after {
 content: close-quote;
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 background: #ddd;
 float: right;
 position: relative;
 bottom: 40px;
}

　指定偽元素尺寸

　　預設生成的元素是一個內聯元素，於是當我們想要指定它們的高度和寬度的是偶，我們首先不得不使用display: block把它們宣告為塊級元素。

　　由於已經設定float，所以無需設定display:black。

blockquote:before {
 content: open-quote;
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 background: #ddd;
 float: left;
 position: relative;
 top: 30px;
 border-radius: 25px;
 height: 25px;
 width: 25px;
}
blockquote:after {
 content: close-quote;
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 background: #ddd;
 float: right;
 position: relative;
 bottom: 40px;
 border-radius: 25px;
 height: 25px;
 width: 25px;
}

　關聯背景影象

　　我們也可以替換用圖片替換內容而不是隻有純文字。儘管content屬性提供了 url()來插入圖片, 但是在更多的例項中，我更傾向於使用背景（background）屬性從而更好的控制圖片。

</pre>
blockquote:before {
 content: " ";
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 float: left;
 position: relative;
 top: 30px;
 border-radius: 25px;

 background: url(images/quotationmark.png) -3px -3px #ddd;

 display: block;
 height: 25px;
 width: 25px;
}
blockquote:after {
 content: " ";
 font-size: 24pt;
 text-align: center;
 line-height: 42px;
 color: #fff;
 float: right;
 position: relative;
 bottom: 40px;
 border-radius: 25px;

 background: url(images/quotationmark.png) -1px -32px #ddd;

 display: block;
 height: 25px;
 width: 25px;
}

　　然而，正如你能夠從上面的程式碼片段中看到的，我們仍舊宣告瞭content屬性，而且此時使用了空字串。content屬性是必須的而且應該經常被應用。否則，偽元素無論如何都無法正常工作。

　結合偽類

　　儘管有不同型別的偽X（偽元素、偽類），我們可以使用偽類連同偽元素一起放入一個CSS規則中，例如，如果我們希望當我們的滑鼠移到blockqoute上時，引號的背景色能夠略微變深。

blockquote:hover:after, blockquote:hover:before {
 background-color: #555;
}

　新增過渡效果

　　我們甚至可以在偽元素上應用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 { content: ”; }以及多重偽元素div::before(3) { content: ”; }。很顯然，在未來的web設計中，這些改進會讓我們的設計有更多的形式（更多的可能性）。然而，他們將會在最新的瀏覽器中得到支援，讓我們現在耐心的等待吧！

　　原文出處： Thoriq Firdaus