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

前端嵐楓發表於2019-03-23
原文網址 : https://juejin.im/post/5c9591d36fb9a07102504737
CSS

層疊樣式表（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 10、Firefox、Opera 和 Chrome 支援 transition 屬性。希望將來有更多的瀏覽器能夠趕上，允許在偽元素中應用轉換屬性。

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

相關文章