1. 程式人生 > >CSS中的before和:after偽元素深入理解

CSS中的before和:after偽元素深入理解

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