CSS的僞元素

僞元素

屬性	描述	CSS的版本
:first-letter	向文本的第一個字母添加特殊樣式。	1
:first-line	向文本的首行添加特殊樣式。	1
:before	在元素以前添加內容。	2
:after	在元素以後添加內容。	2

CSS 僞元素用於向某些選擇器設置特殊效果。

語法

僞元素的語法：

selector:pseudo-element {property:value;}

CSS 類也能夠與僞元素配合使用：

selector.class:pseudo-element {property:value;}

CSS2 - :before 僞元素

":before" 僞元素能夠在元素的內容前面插入新內容。

下面的例子在每一個 <h1> 元素前面插入一幅圖片：

h1:before
  {
  content:url(beep.wav);

); }

CSS2 - :after 僞元素

":after" 僞元素能夠在元素的內容以後插入新內容。

下面的例子在每一個 <h1> 元素後面插入一幅圖片：

h1:after
  {
  content:url(logo.gif);
  }
注意：
[1]：before 和 :after 若是沒有設置content屬性，則不生效，content能夠設置爲圖片、聲音等的url，字符串等，當content設置爲空字符串時''，:before和:after也能夠生效
[2] :若是已規定 !DOCTYPE，那麼 Internet Explorer 8 （以及更高版本）支持 content 屬性。

:first-line 僞元素

"first-line" 僞元素用於向文本的首行設置特殊樣式。

瀏覽器會根據 "first-line" 僞元素中的樣式對 p 元素的第一行文本進行格式化：

p:first-line

  {
  color:#ff0000;
  font-variant:small-caps;
  }

註釋："first-line" 僞元素只能用於塊級元素。

註釋：下面的屬性可應用於 "first-line" 僞元素：

• font
• color
• background
• text-decoration
• vertical-align
• text-transform
• line-height
• clear
• word-spacing
• letter-spacing

:first-letter 僞元素

"first-letter" 僞元素用於向文本的首字母設置特殊樣式：

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

註釋："first-letter" 僞元素只能用於塊級元素。

註釋：下面的屬性可應用於 "first-letter" 僞元素：

• font
• color
• background
• text-decoration
• vertical-align (僅當 float 爲 none 時)
• text-transform
• line-height
• clear
• float
• margin
• padding
• border

僞元素和 CSS 類

僞元素能夠與 CSS 類配合使用：

  {
  color: #FF0000;
  }

<p class="article">This is a paragraph in an article。</p>
p.article:first-letter

上面的例子會使全部 class 爲 article 的段落的首字母變爲紅色。

多重僞元素

能夠結合多個僞元素來使用。

在下面的例子中，段落的第一個字母將顯示爲紅色，其字體大小爲 xx-large。第一行中的其他文本將爲藍色，並以小型大寫字母顯示。段落中的其他文本將以默認字體大小和顏色來顯示：

p:first-letter
  {
  color:#ff0000;
  font-size:xx-large;
  }

p:first-line
  {
  color:#0000ff;
  font-variant:small-caps;
  }