理解僞元素 :Before 和 :After

時間  2019-11-11
標籤 理解 元素 简体版
原文   原文鏈接

層疊樣式表（CSS）的主要目的是給HTML元素添加樣式，然而，在一些案例中給文檔添加額外的元素是多餘的或是不可能的。事實上CSS中有一個特性容許咱們添加額外元素而不擾亂文檔自己，這就是「僞元素」。css

n1

　　你必定據說過這個詞，尤爲是當你一直關注着咱們的教程。點此瀏覽原做者的其餘文章html

　　事實上，的確有一些CSS家族的成員（CSS選擇器）被分類爲僞元素好比：:first-line, :first-letter, ::selection, :before and :after。可是，就本文而言，咱們將把咱們探討的範圍限制在:before 和 :after這兩個元素上。所以，本文中的「僞元素」將特指這兩個僞元素（:before 和 :after），咱們將從基礎入手，來研究這個獨特的主題。css3

　關於語法和瀏覽器支持

　　僞元素實際上在CSS1中就存在了，可是咱們如今所討論的:before和:after則發佈於CSS2.1中。在最初，僞元素的語法是使用「:」（一個冒號），隨着web的發展，在CSS3中修訂後的僞元素使用「::」（兩個冒號），也就是::before 和 ::after—以區分僞元素和僞類（好比:hover，:active等）web

syntax1

　　然而，不管你使用單冒號仍是雙冒號，瀏覽器都將能識別它們。因爲IE8只支持單冒號的格式，安全起見若是你想要更普遍的瀏覽器兼容性那麼仍是使用單冒號的格式吧！瀏覽器

　它是作什麼的

　　簡而言之，僞元素將會在內容元素的先後插入額外的元素，所以當咱們添加它們時，使用如下的標記方式，他們在技術上是平等的。安全

?
1
2
3
4
5
<p>
<span>:before</span>
  This the main content.
<span>:after</span>
</p>

　　可是這些元素實際上並不在文檔中生成。它們將在外部可見，可是你將不會在文檔的源代碼中找到它們，所以，實際上它們是「虛假」的元素。字體

　使用僞元素

　　使用僞元素是相對容易的，:before將會在內容以前「添加」一個元素而:after將會在內容後「添加」一個元素。在它們之中添加內容咱們可使用content屬性。url

　　舉例來講，下面的代碼片斷將在引用的以前和以後分別添加添加一個引號。spa

quotationmark 1(1)

 

?
1
2
3
4
5
6
blockquote:before {
  content : open-quote ;
}
blockquote:after {
  content : close-quote ;
}

　僞元素樣式

　　儘管做爲「虛假」的元素，事實上僞元素表現上就像是「真正」的元素，咱們可以給它們添加任何樣式，好比改變它們的顏色、添加背景色、調整字體大小、調整它們中的文本等等。.net

styles4

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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把它們聲明爲塊級元素。

　　因爲已經設置float，因此無需設置display:black。

dimension5

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
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 ;
  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 ;
  height : 25px ;
  width : 25px ;
}

　關聯背景圖像

　　咱們也能夠替換用圖片替換內容而不是隻有純文本。儘管content屬性提供了 url()來插入圖片, 可是在更多的實例中，我更傾向於使用背景（background）屬性從而更好的控制圖片。

image-background6

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
</ pre >
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屬性，並且此時使用了空字符串。content屬性是必須的並且應該常常被應用。不然，僞元素不管如何都沒法正常工做。

　結合僞類

　　儘管有不一樣類型的僞X（僞元素、僞類），咱們可使用僞類連同僞元素一塊兒放入一個CSS規則中，例如，若是咱們但願當咱們的鼠標移到blockqoute上時，引號的背景色可以略微變深。

hover7

?
1
2
3
blockquote:hover:after, blockquote:hover:before {
  background-color : #555 ;
}

　添加過渡效果

　　咱們甚至能夠在僞元素上應用transition屬性來建立優美的顏色過渡效果。

?
1
2
3
4
transition: all 350ms;
-o-transition: all 350ms;
-moz-transition: all 350ms;
-webkit-transition: all 350ms;

　更多的靈感

　　爲了激發你的靈感，咱們已經選擇了三個很酷的例子，能夠在web設計上給你不少主意。

　　迷人的陰影

　　在這個教程中 Paul Underwood 解釋瞭如何建立更加逼真和吸引人的陰影效果。

　　使用 僞元素:before 和 :after 。它們兩個都是絕對定位，並且使用負z-index來放置到圖片後方實現陰影效果。

fascinating-shadows8

　　3D按鈕

　　這是一個很是聰明的實現，利用僞元素結合CSS3 box-shadow 來繪製一個使人吃驚的3D按鈕，僅僅使用了CSS和單一的錨文本。僞元素:before 被用來在按鈕的左側添加數字「1」。

3d-button9

　　疊加圖像效果

　　使用僞元素來僅僅依靠一個圖片標籤建立一個「凌亂的」疊加圖像效果也是可能的。僞元素用於創建一個圖片疊加的錯覺，經過使用z-index負值使「疊加」的圖片在真正的圖片後面來實現。

stacked-image10

　結論

　　僞元素很酷同時也是可應用到實際工做中的，基本上，每個咱們所添加的元素都不會干擾現有的HTML結構，並且僞元素能夠作到 幾乎全部咱們能想到的事情。

　　實際上有一些僞元素的改進工做,目前逐步進行，好比僞元素嵌套div::before::before { content: 」; }以及多重僞元素div::before(3) { content: 」; }。很顯然，在將來的web設計中，這些改進會讓咱們的設計有更多的形式（更多的可能性）。然而，他們將會在最新的瀏覽器中獲得支持，讓咱們如今耐心的等待吧！

　　原文出處： Thoriq Firdaus

相關文章