學習使用:before和:after僞元素

時間 2019-11-06

標籤學習使用元素简体版

原文原文鏈接

若是你一直密切關注着各類網頁設計的博客，你可能已經注意到了:before和:after僞元素已經在前端開發中得到了至關多的關注。特別是在Nicolas Gallagher的博客中，後期運用了不少僞類元素。php

Nicolas Gallagher使用僞元素用靜態的HTML標籤建立84個GUI圖標。css

爲了補充說明上述內容(和利用當前發展的趨勢)，我收集一些徹底在僞元素下運行的東西。本文主要針對這一類人羣，即已經看到了用僞元素作出了很酷的東西，但想知道全部有關before在css技術裏的運用。html

儘管css 規範中包含其餘的僞元素，咱們焦點是 :before 和 :after。所以，爲了簡便起見，我所說的「僞元素」泛指這兩個特別的僞元素。前端

僞元素能作什麼呢？

「僞元素」，顧名思義。它建立了一個虛假的元素，並插入到目標元素內容以前或以後。html5

單詞「pseudo」是希臘語的英譯，它的基本意思是「說謊的，不誠實的，錯誤的。」所以叫僞元素是適合的。由於在文檔中它不實際改變什麼。相反的，它們是像幽靈通常的元素插入在css中，他們對用戶是可見的，能夠經過css控制。css3

基本語法

:before 和 :after 僞元素編碼很是簡單(和大多數的css屬性同樣不須要一大堆的前綴)。這裏是一個簡單的例子。web

 
        #example:before { 
       
        content 
        :  
        "#" 
        ; 
       
        } 
       
        #example:after { 
       
        content 
        :  
        "." 
        ; 
       
        }

這個例子中提到了兩件事情，第一，咱們用#example:before和#example:after來目標鎖定相同的元素.嚴格的說，在代碼中他們是僞元素。瀏覽器

第二，在內容模塊中提到，僞元素若是沒有設置「content」屬性，僞元素是無用的。app

在這個例子中，擁有屬性id的元素將有一個哈希符號放置內容以前，和一個句號在內容以後。編輯器

語法筆記

你能夠設置content屬性值爲空，而且僅僅把他當作一個內容不多的盒子。像這樣:

 
        #example:before { 
       
        content 
        :  
        "" 
        ; 
       
        display 
        :  
        block 
        ; 
       
        width 
        :  
        100px 
        ; 
       
        height 
        :  
        100px 
        ; 
       
        }

然而，你不能夠徹底的移除content屬性，若是你移除了，僞元素將不會起做用。至少，content屬性須要空引用做爲它的值(即:content:「」)。

你也許注意到，你也能夠用兩個冒號(::before 和 ::after) 寫僞元素，這個我之前討論過的。簡短的解釋是，對於這兩種語法沒有什麼不一樣，僅僅一點的不一樣是，僞元素(雙冒號)，css3中的僞類是（單冒號）

最後就語法而言。從技術上講，你能夠廣泛的應用僞元素，不是放在特殊的元素上，像這樣：

 
        :before { 
       
        content 
        :  
        "#" 
        ; 
       
        }

雖然上面是有效的，可是它十分的沒用。代碼會在DOM裏的每一個元素的內容以前插入散列符號。即便你刪除了<body>標籤和它的全部內容，你仍會在頁面上看見兩個散列符號：一個在<html>裏，另外一個在<body>標籤裏，瀏覽器會自動建立哪個。

插入內容的特色

正如前面說起的，插入的內容在頁面的源碼裏是不可見的。只能在css裏可見

同時，插入的元素在默認狀況下是內聯元素（或者，在html5中，在文本語義的類別裏）。所以，爲了給插入的元素賦予高度，填充，邊距等等，你一般必須顯式地定義它是一個塊級元素。

這會是對如何設計僞元素的一個簡要的說明，看我下面文本編輯器的這幅圖

在這個例子中，我高亮的樣式將被應用到元素裏插入到目標元素內容的前面和後面。

還要注意的是典型的CSS繼承規則適用於插入的元素。例如，你有字體系列黑體，宋體，無襯線字體應用到body元素裏，而後僞元素會像其餘元素同樣繼承這些字體系列。

一樣的，僞元素不會繼承沒有天然繼承自父元素(如 padding and margins)的樣式。

以前或以後是什麼？

你的直覺是:before和:after僞元素多是插入的內容會被注入到目標元素的前或後注入。可是，正如上面提到的，不是這樣的。

注入的內容將是有關聯的目標元素的子元素，但它會被置於這個元素的任何內容的「前」或「後」。

爲了證實這一點，看看下面的代碼。首先，在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裏，你所看的一段文字帶有的是一個類的box，還有這樣的文字「Other content」在裏面（像你所會看到的同樣，若是你看見了首頁的源代碼）。在css中，這段內容被設置了寬度，以及一些padding和可見的邊框

而後咱們有了僞元素。在這個例子中，它是一個散列符號插入到該段內容以前。隨後css給了它一個邊框以及一些padding和margins。

這裏是瀏覽器中查看的結果：

外面的盒子是這個段落。圍繞有散列符號的邊框表示僞元素的邊界。因此，不是插入「before」到段落，而是僞元素被置於到此段落的「Other content」的前面。

插入非文本內容

我簡要的提醒，你能夠把屬性的值置爲空字符串或是插入文本內容。你基本上有屬性的值要包含什麼的兩個額外的選擇

首先，你能夠包含一個指向一個圖像的URL，就像在css裏包含一個背景圖像同樣作你能作的

 
        p:before { 
       
        content 
        :  
        url 
        (image.jpg); 
       
        }

注意不能使用引號。若是你將URL用引號括起來，那麼它會變成一個字符串和插入文本「url(image.jpg)」做爲其內容，插入的而不是圖像自己。

固然，你能夠包含一個Data URI代替圖像引用，正如你能夠用css背景同樣。

你還能夠選擇ATRR(X)中的函數的形式。此功能，根據規範?，「把X屬性的值以字符串的形式返回」

下面是一個例子：

 
        a:after { 
       
        content 
        :  
        attr 
        (href); 
       
        }

attr（）函數的功能是什麼？它獲得特定屬性的值並把它做爲插入的文本成爲一個僞元素。

上面的代碼會致使頁面上的每個<a>元素的href值當即被放置在每一個各自的<a>元素的後面。在文檔被打印時，它能夠用做一個包含全部URl的打印樣式表。

你也能夠用這個函數去獲取元素的title屬性，或者甚至是microdata的值。固然，並非全部的例子都符合本身的實際，但根據不一樣的狀況，一個特定的屬性值做爲一個僞元素能夠是實際的

然而，獲取title或者圖像的alt的值並做爲實際的僞元素顯示在頁面上是不可能的。記住僞元素必須是被應用元素的子元素。圖像，這是void(或者是空元素)，沒有子元素，因此它在這個列子中不可用，一樣也適用於其餘空元素，例如：<input>。

可怕的瀏覽器兼容性

任何前端技術的發展勢頭，第一個問題就是瀏覽器的支持。在這種狀況之下，它不是個很大的問題。

瀏覽器支持:before 和 :after 僞元素棧，像這樣：

Chrome 2+,
Firefox 3.5+ (3.0 had partial support),
Safari 1.3+,
Opera 9.2+,
IE8+ (with some minor bugs),
幾乎全部的移動瀏覽器。

惟一真正的問題是沒有得到支持的（不用奇怪）IE6和IE7。因此，若是你的愛好者是在良好合適的web開發（或者其餘具備較低IE版本的市場），你能夠繼續自由地使用僞元素。

僞元素不是決定性的

幸運的是，缺乏僞元素不會形成大問題。大多數狀況下，僞元素通常修飾（或者幫助）內容，不會給不支持的瀏覽器形成問題。因此，若是你的支持者具備較高的IE版本，你仍然能夠在某種程度上使用它們。

一些提醒

正如前面提到的，僞元素不會出如今DOM中。這些元素不是真正的元素。所以，它們不是可用的。因此，不要使用僞元素生成內容，是您的網頁的可用性和可訪問性的關鍵。

另一件須要記住的是，開發工具，例如火狐，不要用僞元素顯示內容。因此，若是使用了，僞元素會形成難以維護和調試緩慢。

（更新：在評論中提到的，你可使用谷歌的開發工具來查看一個僞元素相關聯的風格，但不會出如今DOM元素裏。同時，火狐在1.8版加入僞元素支持它。）

你所須要用有的理念是用這個技術以創造出實用的東西。與此同時，未來進一步研究CSS僞元素，必定要看看咱們已經連接的一些文章。

譯者手語：整個翻譯依照原文線路進行，並在翻譯過程略加了我的對技術的理解。若是翻譯有不對之處，還煩請同行朋友指點。謝謝！

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。