理解偽元素 :before 和 :after
層疊樣式表(CSS)的主要目的是給HTML元素添加樣式，然而，在一些案例中給文檔添加額外的元素是多余的或是不可能的。事實上CSS中有一個特性允許我們添加額外元素而不擾亂文檔本身，這就是“偽元素”。
你一定聽說過這個詞，尤其是當(dāng)你一直關(guān)注著我們的教程。點此瀏覽原作者的其他文章
事實上，的確有一些CSS家族的成員(CSS選擇器)被分類為偽元素比如：:first-line, :first-letter, ::selection, :before and :after。但是，就本文而言，我們將把我們探討的范圍限制在:before 和 :after這兩個元素上。因此，本文中的“偽元素”將特指這兩個偽元素(:before 和 :after)，我們將從基礎(chǔ)入手，來研究這個獨特的主題。
關(guān)于語法和瀏覽器支持
偽元素實際上在CSS1中就存在了，但是我們現(xiàn)在所討論的:before和:after則發(fā)布于CSS2.1中。在最初，偽元素的語法是使用“:”(一個冒號)，隨著web的發(fā)展，在CSS3中修訂后的偽元素使用“::”(兩個冒號)，也就是::before 和 ::after—以區(qū)分偽元素和偽類(比如:hover，:active等)
然而，無論你使用單冒號還是雙冒號，瀏覽器都將能識別它們。由于IE8只支持單冒號的格式，安全起見如果你想要更廣泛的瀏覽器兼容性那么還是使用單冒號的格式吧!
它是做什么的
簡而言之，偽元素將會在內(nèi)容元素的前后插入額外的元素，因此當(dāng)我們添加它們時，使用以下的標(biāo)記方式，他們在技術(shù)上是平等的。
- <p>
- <span>:before</span>
- This the main content.
- <span>:after</span>
- </p>
但是這些元素實際上并不在文檔中生成。它們將在外部可見，但是你將不會在文檔的源代碼中找到它們，因此，實際上它們是“虛假”的元素。
使用偽元素
使用偽元素是相對容易的，:before將會在內(nèi)容之前“添加”一個元素而:after將會在內(nèi)容后“添加”一個元素。在它們之中添加內(nèi)容我們可以使用content屬性。
舉例來說，下面的代碼片段將在引用的之前和之后分別添加添加一個引號。
- blockquote:before {
- content: open-quote;
- }
- blockquote:after {
- content: close-quote;
- }
偽元素樣式
盡管作為“虛假”的元素，事實上偽元素表現(xiàn)上就像是“真正”的元素，我們能夠給它們添加任何樣式，比如改變它們的顏色、添加背景色、調(diào)整字體大小、調(diào)整它們中的文本等等。
- 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;
- }
指定偽元素尺寸
由于已經(jīng)設(shè)置float，所以無需設(shè)置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;
- }
關(guān)聯(lián)背景圖像
我們也可以替換用圖片替換內(nèi)容而不是只有純文本。盡管content屬性提供了 url()來插入圖片, 但是在更多的實例中，我更傾向于使用背景(background)屬性從而更好的控制圖片。
- 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;
- }
然而，正如你能夠從上面的代碼片段中看到的，我們?nèi)耘f聲明了content屬性，而且此時使用了空字符串。content屬性是必須的而且應(yīng)該經(jīng)常被應(yīng)用。否則，偽元素?zé)o論如何都無法正常工作。
結(jié)合偽類
盡管有不同類型的偽X(偽元素、偽類)，我們可以使用偽類連同偽元素一起放入一個CSS規(guī)則中，例如，如果我們希望當(dāng)我們的鼠標(biāo)移到blockqoute上時，引號的背景色能夠略微變深。
- blockquote:hover:after, blockquote:hover:before {
- background-color: #555;
- }
添加過渡效果
我們甚至可以在偽元素上應(yīng)用transition屬性來創(chuàng)建優(yōu)美的顏色過渡效果。
- transition: all 350ms;
- -o-transition: all 350ms;
- -moz-transition: all 350ms;
- -webkit-transition: all 350ms;
更多的靈感
為了激發(fā)你的靈感，我們已經(jīng)選擇了三個很酷的例子，可以在web設(shè)計上給你很多主意。
迷人的陰影(http://www.paulund.co.uk/creating-different-css3-box-shadows-effects)
在這個教程中 Paul Underwood 解釋了如何創(chuàng)建更加逼真和吸引人的陰影效果。
使用 偽元素:before 和 :after 。它們兩個都是絕對定位，而且使用負(fù)z-index來放置到圖片后方實現(xiàn)陰影效果。
3D按鈕
這是一個非常聰明的實現(xiàn)，利用偽元素結(jié)合CSS3 box-shadow 來繪制一個令人吃驚的3D按鈕，僅僅使用了CSS和單一的錨文本。偽元素:before 被用來在按鈕的左側(cè)添加數(shù)字“1”。
疊加圖像效果
使用偽元素來僅僅依靠一個圖片標(biāo)簽創(chuàng)建一個“凌亂的”疊加圖像效果也是可能的。偽元素用于建立一個圖片疊加的錯覺，通過使用z-index負(fù)值使“疊加”的圖片在真正的圖片后面來實現(xiàn)。
結(jié)論
偽元素很酷同時也是可應(yīng)用到實際工作中的，基本上，每一個我們所添加的元素都不會干擾現(xiàn)有的HTML結(jié)構(gòu)，而且偽元素可以做到 幾乎所有我們能想到的事情。
實際上有一些偽元素的改進工作,目前逐步進行，比如偽元素嵌套div::before::before { content: ”; }以及多重偽元素div::before(3) { content: ”; }。很顯然，在未來的web設(shè)計中，這些改進會讓我們的設(shè)計有更多的形式(更多的可能性)。然而，他們將會在***的瀏覽器中得到支持，讓我們現(xiàn)在耐心的等待吧!
