CSS偽類(pseudo class)簡明介紹之:before和:after

在線演示  本地下載  在線調試

如果大家經常關注互聯網新網站和應用的話，或者你喜歡收集不同的網站模板，你會發現越來越多的網站模板或者網站在使用CSS偽類 - pseudo class。

今天我們這里給大家簡單介紹偽類中經常使用的倆個:before和:after。希望大家能夠覺得有幫助！

如果你喜歡我們的文章，或者有任何問題，請給我們留言，謝謝！

什么是偽類(pseudo class)？

pseudo這個單詞來源於希臘語的音譯，意思是虛構的，假的，或者偽的意思。因此這里不難理解為什么我們稱之為偽類。

和一般的DOM中的元素樣式不一樣，它並不改變任何DOM內容。只是插入了一些修飾類的元素，這些元素對於用戶來說是可見的，但是對於DOM來說不可見。

因此大家需要注意一下幾點：

• 它們不是真正的元素，對於很多情況下，大家不用用它展示實際意義的內容，盡量用它顯示修飾性內容或者設計性內容，例如，圖標
• 要知道有些相關的開發工具，例如著名的開發工具firebug根本就不顯示任何的偽類生成內容，如果你使用的話，你知道后果的！你將陷入盲目的debug中。當然你使用Chrome可以看到樣式，但是在DOM看不到元素。

什么時候使用偽類(pseudo class)？

如果你需要創建一些修飾類圖標，或者設計UI的時候，使用偽類是相當方便的，大家可能還記得那篇分享一個純CSS開發的氣泡式提示框文章吧，一個非常准確的使用場景。

支持的瀏覽器

• Chrome 2+
• Firefox 3.5+ (FF3.0支持部分),
• Safari 1.3+
• Opera 9.2+
• IE8+ 
• 手機上的瀏覽器

基本使用方法

如果我們有一個鏈接元素，如下：

<a href="http://www.gbin1.com" id="gbin1">GBIN1</a>

如果我們定義了相關的CSS，如下：

#gbin1{
  font-size: 12px
  background: #202020
}

我們使用:before生成當前元素前面的偽元素樣式和內容，這里我們需要使用content屬性，注意我們可以使用文字類，或者圖片，如下：

#gbin1:before{
    content: url("images/gbin1icon.png");
}

我們使用:after生成此元素后面內容的樣式和內容，如下：

#gbin1:after{
    content: attr(href);
}

上面例子可以看到，我們使用content生成偽對象內容，使用的是一個圖片作為元素內容，如果你不使用content對象，偽類基本沒有任何使用價值。

同時我們可以使用attr來引用元素的屬性，例如這里我們可以讀取id=gbin1的元素的href屬性對應的值做為:after生成的偽元素內容。

如果你見到::before和::after的樣式，也不用奇怪，唯一區別在於這是CSS3的偽類表示方法。

注意：上面代碼中，我們在:before中生成一個圖片內容： url("images/gbin1icon.png"); ，注意沒有引號，否則內容將不是圖片，而是"url("image..")"字符串兒。

缺省情況下， 偽類元素display缺省屬性是inline，你可以通過設置display: block來修改顯示方式。以下代碼將生成一個區域的偽類元素：

#gbin1:before{
    content: "";
    display: block;
    width: 200px;
    height: 200px;
}

注意：你不能刪除content屬性，否則這個偽類生成的元素將不存在。

這里我們使用偽類來生成帶有圖表的鏈接按鈕，代碼如下：

#gbin1:before{
    content: "";
    padding: 10px 15px;
    margin: 10px 15px;
    background: url("images/gbin1icon.png") no-repeat scroll 0% 50% transparent;
}


#gbin1:after{
    content: attr(href);
    padding: 20px;
    margin: 20px;
}

生成內容如下圖：

各部分代碼生成的元素內容如下圖：

以上介紹我們基本簡單的介紹了偽類在CSS中的使用，希望對於沒有接觸過偽類的朋友有幫助，謝謝！