CSS中的before和:after偽元素使用詳解
我要評(píng)論如果你一直密切關(guān)注著各種網(wǎng)頁(yè)設(shè)計(jì)的博客，你可能已經(jīng)注意到了:before和:after偽元素已經(jīng)在前端開(kāi)發(fā)中獲得了相當(dāng)多的關(guān)注。特別是在Nicolas Gallagher的博客中，后期運(yùn)用了很多偽類(lèi)元素。
Nicolas Gallagher使用偽元素用靜態(tài)的HTML標(biāo)簽創(chuàng)建84個(gè)GUI圖標(biāo)。
為了補(bǔ)充說(shuō)明上述內(nèi)容(和利用當(dāng)前發(fā)展的趨勢(shì))，我收集一些完全在偽元素下運(yùn)行的東西。本文主要針對(duì)這一類(lèi)人群，即已經(jīng)看到了用偽元素做出了很酷的東西，但想知道所有有關(guān)before在css技術(shù)里的運(yùn)用。
盡管css 規(guī)范中包含其他的偽元素，我們焦點(diǎn)是 :before 和 :after。因此，為了簡(jiǎn)便起見(jiàn)，我所說(shuō)的“偽元素”泛指這兩個(gè)特別的偽元素。
偽元素能做什么呢？
“偽元素”，顧名思義。它創(chuàng)建了一個(gè)虛假的元素，并插入到目標(biāo)元素內(nèi)容之前或之后。
單詞“pseudo”是希臘語(yǔ)的英譯，它的基本意思是“說(shuō)謊的，不誠(chéng)實(shí)的，錯(cuò)誤的。”因此叫偽元素是適合的。因?yàn)樵谖臋n中它不實(shí)際改變什么。相反的，它們是像幽靈一般的元素插入在css中，他們對(duì)用戶(hù)是可見(jiàn)的，可以通過(guò)css控制。
基本語(yǔ)法
:before 和 :after 偽元素編碼非常簡(jiǎn)單(和大多數(shù)的css屬性一樣不需要一大堆的前綴)。這里是一個(gè)簡(jiǎn)單的例子。
- #example:before {
- content: "#";
- }
- #example:after {
- content: ".";
- }
這個(gè)例子中提到了兩件事情，第一，我們用#example:before和#example:after來(lái)目標(biāo)鎖定相同的元素.嚴(yán)格的說(shuō)，在代碼中他們是偽元素。
第二，在內(nèi)容模塊中提到，偽元素如果沒(méi)有設(shè)置“content”屬性，偽元素是無(wú)用的。
在這個(gè)例子中，擁有屬性id的元素將有一個(gè)哈希符號(hào)放置內(nèi)容之前，和一個(gè)句號(hào)在內(nèi)容之后。
語(yǔ)法筆記
你可以設(shè)置content屬性值為空，并且僅僅把他當(dāng)做一個(gè)內(nèi)容很少的盒子。像這樣:
- #example:before {
- content: "";
- display: block;
- width: 100px;
- height: 100px;
- }
然而，你不可以完全的移除content屬性，如果你移除了，偽元素將不會(huì)起作用。至少，content屬性需要空引用作為它的值(即:content:“”)。
你也許注意到，你也可以用兩個(gè)冒號(hào)(::before 和 ::after) 寫(xiě)偽元素，這個(gè)我以前討論過(guò)的。簡(jiǎn)短的解釋是，對(duì)于這兩種語(yǔ)法沒(méi)有什么不同，僅僅一點(diǎn)的不同是，偽元素(雙冒號(hào))，css3中的偽類(lèi)是（單冒號(hào)）
最后就語(yǔ)法而言。從技術(shù)上講，你可以普遍的應(yīng)用偽元素，不是放在特殊的元素上，像這樣：
- :before {
- content: "#";
- }
雖然上面是有效的，但是它十分的沒(méi)用。代碼會(huì)在DOM里的每個(gè)元素的內(nèi)容之前插入散列符號(hào)。即使你刪除了<body>標(biāo)簽和它的所有內(nèi)容，你仍會(huì)在頁(yè)面上看見(jiàn)兩個(gè)散列符號(hào)：一個(gè)在<html>里，另一個(gè)在<body>標(biāo)簽里，瀏覽器會(huì)自動(dòng)創(chuàng)建哪一個(gè)。
插入內(nèi)容的特點(diǎn)
正如前面提及的，插入的內(nèi)容在頁(yè)面的源碼里是不可見(jiàn)的。只能在css里可見(jiàn)
同時(shí)，插入的元素在默認(rèn)情況下是內(nèi)聯(lián)元素（或者，在html5中，在文本語(yǔ)義的類(lèi)別里）。因此，為了給插入的元素賦予高度，填充，邊距等等，你通常必須顯式地定義它是一個(gè)塊級(jí)元素。
這會(huì)是對(duì)如何設(shè)計(jì)偽元素的一個(gè)簡(jiǎn)要的說(shuō)明，看我下面文本編輯器的這幅圖
在這個(gè)例子中，我高亮的樣式將被應(yīng)用到元素里插入到目標(biāo)元素內(nèi)容的前面和后面。
還要注意的是典型的CSS繼承規(guī)則適用于插入的元素。例如，你有字體系列黑體，宋體，無(wú)襯線字體應(yīng)用到body元素里，然后偽元素會(huì)像其他元素一樣繼承這些字體系列。
同樣的，偽元素不會(huì)繼承沒(méi)有自然繼承自父元素(如 padding and margins)的樣式。
之前或之后是什么？
你的直覺(jué)是:before和:after偽元素可能是 插入的內(nèi)容會(huì)被注入到目標(biāo)元素的前或后注入。但是，正如上面提到的，不是這樣的。
注入的內(nèi)容將是有關(guān)聯(lián)的目標(biāo)元素的子元素，但它會(huì)被置于這個(gè)元素的任何內(nèi)容的“前”或“后”。
為了證明這一點(diǎn)，看看下面的代碼。首先，在HTML：
- <p class="box">Other content.</p>
下面是插入偽元素的css：
- p.box {
- width: 300px;
- border: solid 1px white;
- padding: 20px;
- }
- p.box:before {
- content: "#";
- border: solid 1px white;
- padding: 2px;
- margin: 0 10px 0 0;
- }
在此html里，你所看的一段文字帶有的是一個(gè)類(lèi)的box，還有這樣的文字“Other content”在里面（像你所會(huì)看到的一樣，如果你看見(jiàn)了首頁(yè)的源代碼）。在css中，這段內(nèi)容被設(shè)置了寬度，以及一些padding和可見(jiàn)的邊框
然后我們有了偽元素。在這個(gè)例子中，它是一個(gè)散列符號(hào)插入到該段內(nèi)容之前。隨后css給了它一個(gè)邊框以及一些padding和margins。
這里是瀏覽器中查看的結(jié)果：
外面的盒子是這個(gè)段落。圍繞有散列符號(hào)的邊框表示偽元素的邊界。所以，不是插入“before”到段落，而是偽元素被置于到此段落的“Other content”的前面。
插入非文本內(nèi)容
我簡(jiǎn)要的提醒，你可以把屬性的值置為空字符串或是插入文本內(nèi)容。你基本上有屬性的值要包含什么的兩個(gè)額外的選擇
首先，你可以包含一個(gè)指向一個(gè)圖像的URL，就像在css里包含一個(gè)背景圖像一樣做你能做的
- p:before {
- content: url(image.jpg);
- }
注意不能使用引號(hào)。如果你將URL用引號(hào)括起來(lái)，那么它會(huì)變成一個(gè)字符串和插入文本“url(image.jpg)”作為其內(nèi)容，插入的而不是圖像本身。
當(dāng)然，你可以包含一個(gè)Data URI代替圖像引用，正如你可以用css背景一樣。
你還可以選擇ATRR(X)中的函數(shù)的形式。此功能，根據(jù)規(guī)范?，“把X屬性的值以字符串的形式返回”
下面是一個(gè)例子：
- a:after {
- content: attr(href);
- }
attr（）函數(shù)的功能是什么？它得到特定屬性的值并把它作為插入的文本成為一個(gè)偽元素。
上面的代碼會(huì)導(dǎo)致頁(yè)面上的每一個(gè)<a>元素的href值立即被放置在每個(gè)各自的<a>元素的后面。在文檔被打印時(shí)，它可以用作一個(gè)包含所有URl的打印樣式表。
你也可以用這個(gè)函數(shù)去獲取元素的title屬性，或者甚至是microdata的值。當(dāng)然，并不是所有的例子都符合自己的實(shí)際，但根據(jù)不同的情況，一個(gè)特定的屬性值作為一個(gè)偽元素可以是實(shí)際的
然而，獲取title或者圖像的alt的值并作為實(shí)際的偽元素顯示在頁(yè)面上是不可能的。記住偽元素必須是被應(yīng)用元素的子元素。圖像，這是void(或者是空元素)，沒(méi)有子元素，所以它在這個(gè)列子中不可用，同樣也適用于其他空元素，例如：<input>。
可怕的瀏覽器兼容性
任何前端技術(shù)的發(fā)展勢(shì)頭，第一個(gè)問(wèn)題就是瀏覽器的支持。在這種情況之下，它不是個(gè)很大的問(wèn)題。
瀏覽器支持:before 和 :after 偽元素棧，像這樣：
- Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
幾乎所有的移動(dòng)瀏覽器。
唯一真正的問(wèn)題是沒(méi)有獲得支持的（不用奇怪）IE6和IE7。所以，如果你的愛(ài)好者是在良好合適的web開(kāi)發(fā)（或者其他具有較低IE版本的市場(chǎng)），你可以繼續(xù)自由地使用偽元素。
偽元素不是決定性的
幸運(yùn)的是，缺少偽元素不會(huì)造成大問(wèn)題。大多數(shù)情況下，偽元素一般修飾（或者幫助）內(nèi)容，不會(huì)給不支持的瀏覽器造成問(wèn)題。所以，如果你的支持者具有較高的IE版本，你仍然可以在某種程度上使用它們。
一些提醒
正如前面提到的，偽元素不會(huì)出現(xiàn)在DOM中。這些元素不是真正的元素。因此，它們不是可用的。所以，不要使用偽元素生成內(nèi)容，是您的網(wǎng)頁(yè)的可用性和可訪問(wèn)性的關(guān)鍵。
另外一件需要記住的是，開(kāi)發(fā)工具，例如火狐，不要用偽元素顯示內(nèi)容。所以，如果使用了，偽元素會(huì)造成難以維護(hù)和調(diào)試緩慢。
（更新：在評(píng)論中提到的，你可以使用谷歌的開(kāi)發(fā)工具來(lái)查看一個(gè)偽元素相關(guān)聯(lián)的風(fēng)格，但不會(huì)出現(xiàn)在DOM元素里。同時(shí)，火狐在1.8版加入偽元素支持它。）
你所需要用有的理念是用這個(gè)技術(shù)以創(chuàng)造出實(shí)用的東西。與此同時(shí)，將來(lái)進(jìn)一步研究CSS偽元素，一定要看看我們已經(jīng)鏈接的一些文章。
譯者手語(yǔ)：整個(gè)翻譯依照原文線路進(jìn)行，并在翻譯過(guò)程略加了個(gè)人對(duì)技術(shù)的理解。如果翻譯有不對(duì)之處，還煩請(qǐng)同行朋友指點(diǎn)。謝謝！
相關(guān)文章
- before 和 after其實(shí)就是附著在元素前后的偽元素，說(shuō)他是偽元素的意思就是，元素不是在DOM中生成的，而是在瀏覽器渲染引擎渲染CSS的時(shí)候畫(huà)上去的，這篇文章主要給大家介紹2017-09-18
那些你所不知的CSS ::before 和::after 偽元素用法
下面小編就為大家?guī)?lái)一篇那些你所不知的CSS ::before 和::after 偽元素用法。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-12- :before和:after偽元素在CSS中除了被用來(lái)添加元素、加小標(biāo)、清浮動(dòng)等,還有很多妙用之處,接下來(lái)我們就來(lái)看一兩個(gè)CSS中:before和:after偽元素使用的奇技淫巧2016-05-20
CSS偽元素 :before, :after, box-shadow應(yīng)用
利用CSS偽元素 ：before 和 ：after 可以在文檔前后插入內(nèi)容而不改變文檔原有結(jié)構(gòu)，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-03-04CSS偽元素before、after設(shè)置特殊效果:制作時(shí)尚焦點(diǎn)圖相框
在css選擇器中有這樣子的寫(xiě)法div:before、div:after，對(duì)于before、after來(lái)說(shuō)有部分人是相當(dāng)陌生的,那么這兩個(gè)標(biāo)簽是什么呢？有什么用處？本文將詳細(xì)介紹，需要的朋友可以參2012-12-12CSS偽元素 CSS:before CSS偽元素(Pseudo Element):after與:before
before 偽元素在元素之前添加內(nèi)容2011-12-04
本篇重點(diǎn)介紹CSS中的:befor、:after創(chuàng)建的偽元素幾種使用場(chǎng)景，如填充文本、作為iconfont、進(jìn)度線、時(shí)間線以及幾何圖形，感興趣的朋友一起看看吧2018-02-07
