CSS中的before和:after僞元素深刻理解

一、定義：

「僞元素」，顧名思義。就是它建立了一個虛假的元素，而且將其虛假的元素插入到目標元素的內容以前或以後。

2：特色：

a、它在實際文檔中不改變什麼，可是對用戶可見，能夠經過css控制，源碼中看不到

b、僞元素若是沒有設置「content」屬性，僞元素是無用的。

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

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

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

c、插入的內容在頁面的源碼裏是不可見的。只能在css裏可見

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

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

e、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（）函數的功能是什麼？它獲得特定屬性的值並把它做爲插入的文本成爲一個僞元素。

 

如需轉載，請註明文章出處和來源網址：http://www.divcss5.com/css-jiaocheng/tc50528.shtml