瞭解css中僞元素 before和after的用法

層疊樣式表（CSS）主要用於將樣式應用於HTML標籤，可是在某些狀況下，向文檔添加額外標籤元素是多餘的或不可能的，CSS中實際上有一個特性容許咱們在不中斷實際文檔的狀況下添加額外標籤，即僞元素。 你據說過這個術語，尤爲是當你一直在學習咱們的一些教程時。 實際上，有一些CSS族成員被歸類爲僞元素，例如：:first-line, :first-letter, ::selection, :before 和:after，咱們將把覆蓋範圍限制爲:before和:after，這裏的「僞元素」專門指這兩個元素。咱們將從基礎的角度來研究這個特殊的主題。

語法和瀏覽器支持

僞元素實際上從css1開始就存在了，可是在css2.1中發佈了:befor和:after咱們討論的內容。在開始時，僞元素使用單冒號做爲語法，而後隨着Web的發展，在CSS3中，僞元素被修改成使用::before & ::after-以將其與僞類（即：hover、：active等）區分開來。 以下圖

然而，當您使用單引號格式或雙引號列格式時，瀏覽器仍然能支持識別它。ie瀏覽器8只支持單引號格式，若是你想要了解更多瀏覽器兼容性， 請點擊。

它是作什麼的？

簡而言之，僞元素將在內容元素以前或以後插入一個額外的元素，所以當咱們同時添加這兩個元素時，它們在技術上是相等的，標籤以下。

<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聲明將其定義爲一個塊元素。

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;
 
  /** define it as a block element **/
  display: block;
  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;
 
  /** define it as a block element **/
  display: block;
  height: 25px;
  width: 25px;
}

複製代碼

附加背景圖

咱們還能夠用圖像替換內容，而不單單是純文本。雖然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;
}
複製代碼

可是，正如您從上面的代碼片斷中看到的，咱們仍然在聲明Content屬性，而此次是用一個空字符串。內容屬性是一項要求，應該始終應用；不然僞元素將不起做用。

與僞類組合使用

儘管它們是不一樣類型的僞，可是咱們能夠在一個css規則中同時使用僞類和僞元素，例如，若是咱們但願在塊引號上方懸停時將引號背景變暗一點。

blockquote:hover:after, blockquote:hover:before {
  background-color: #555;
}
複製代碼

添加過渡效果

咱們甚至能夠將過渡屬性應用於它們，以建立優美的顏色過渡效果。

transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;
複製代碼

但不幸的是，過渡效果彷佛只在Internet Explorer 十、Firefox、Opera 和 Chrome 支持 transition 屬性。但願未來有更多的瀏覽器可以遇上，容許在僞元素中應用轉換屬性。

原文地址：www.hongkiat.com/blog/pseudo…