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

　　（此文沒有門檻，淺顯易懂，適合新手入門）

　　以前覺得僞元類選擇器用的很少，因此沒怎麼關注，如今發現：before和：after僞元素已經在前端開發中得到了至關多的關注，因此來研究一下，加深印象。

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

僞元素能作什麼呢？

　　「僞元素」，顧名思義。它建立了一個虛假的元素，並插入到目標元素內容以前或以後。由於在文檔中它不實際改變什麼。相反的，它們是像幽靈通常的元素插入在css中，他們對用戶是可見的，能夠經過css控制。

基本語法

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

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

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

　　這個例子中提到了兩件事情。一，咱們用#example:before和#example:after來目標鎖定相同的元素.嚴格的說，在代碼中他們是僞元素；二，在內容模塊中提到，僞元素若是沒有設置「content」屬性，僞元素是無用的。

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

語法筆記

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

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

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

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

插入內容的特色

　　插入的元素在默認狀況下是內聯元素（或者，在html5中，在文本語義的類別裏）。所以，爲了給插入的元素賦予高度，填充，邊距等等，你一般必須顯式地定義它是一個塊級元素。還要注意的是典型的CSS繼承規則適用於插入的元素。例如，你有字體系列黑體，宋體，無襯線字體應用到body元素裏，而後僞元素會像其餘元素同樣繼承這些字體系列。一樣的，僞元素不會繼承沒有天然繼承自父元素(如 padding and margins)的樣式。

以前或以後是什麼？

　　咱們的直覺是：before和：after僞元素多是 插入的內容會被注入到目標元素的前或後注入。可是，不是這樣的。注入的內容將是有關聯的目標元素的子元素，但它會被置於這個元素的任何內容的「前」或「後」。爲了證實這一點，看看下面的代碼。首先，在HTML：

<p class="box">Other content.</p>

　　下面是插入僞元素的css：

p.box {
        width: 300px;
        border: solid 1px black;
        padding: 20px;
      }
      
      p.box:before {
        content: "#";
        border: solid 1px black;
        padding: 2px;
        margin: 0 10px 0 0;
      } 

　　在這個例子中，它是一個散列符號插入到該段內容以前，而不是p元素以前。效果以下：

            

插入非文本內容

　　我簡要的提醒，你能夠把屬性的值置爲空字符串或是插入文本內容。首先，你能夠包含一個指向一個圖像的URL

p:before {
        content: url(img/3n.png);
      }

　　注意不能使用引號。若是你將URL用引號括起來，那麼它會變成一個字符串和插入文本「url(image.jpg)」做爲其內容，插入的而不是圖像自己。固然，你能夠包含一個Data URL代替圖像引用，正如你能夠用css背景同樣。效果以下：

　　　　

可怕的瀏覽器兼容性

　　任何前端技術的發展勢頭，第一個問題就是瀏覽器的支持。在這種狀況之下，它不是個很大的問題。瀏覽器支持:before 和 :after 僞元素棧，像這樣：

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

僞元素不是決定性的

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