1、定義：

“偽元素”，顧名思義。就是它建立了一個虛假的元素，並且將其虛假的元素插入到目標元素的內容之前或之後。

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