你所不知的 CSS ::before 和 ::after 僞元素用法

         

一：:before && :after的用法

:before

如同對僞元素的名稱同樣，:before 是用來給指定的元素的內容前面插入新的內容。舉例說明：

.before:before{content:'you before'; color:red;} <div class="before"> me</div> 

在這裏咱們給僞元素 :before 添加了屬性 content，並賦值爲 you before。咱們來看效果：
//在指定元素的內容 me 前添加了新內容 you before

咱們不難發現這裏經過僞元素 :before 添加的新內容區域默認的 display 屬性值爲 inline，那麼咱們可不能夠修改新內容區域的屬性，答案是確定的。你能夠像修改其餘元素同樣修改它的樣式，咱們來將它的 display 屬性值來改成block。

.before:before{content:'you before'; display:block; color:red;} <div class="before"> me</div> 

如今咱們再來看下效果：
//由僞元素 :before 生成新內容區域果真變爲了塊元素

content 屬性

對於僞元素 :before 和 :after 而言，屬性 content 是必須設置的，咱們知道屬性的值能夠爲字符串，也能夠有其它形式，好比指向一張圖片的 URL:

content: url( "img/icon.png" ) 

配合僞類使用
僞元素 :before 還能夠配合僞類使用，這裏舉常常與 :before 配合使用的僞類 :hover 爲例：

.before:hover:before{content:'you before'; color:red;} <div class="before"> me</div> 

配合取值函數 attr() 使用
還有一種較爲常見的用法，即配合取值函數 attr() 一塊兒使用，如：

a::before{content: attr(title)}
<a href="http://www.segmentfault.com" title="專業面向開發者的中文技術問答社區"></a> 

這個達到的效果跟下面同樣：

<a href="http://www.segmentfault.com">專業面向開發者的中文技術問答社區</a> 

:after

僞元素 :after 與 僞元素 :before 類型相同，只不過它指定的屬性 content 值爲出如今指定元素內容的後面，說明省。

二：僞類和僞元素的區別

僞類種類

僞元素種類

僞類：做用對象是整個元素

例如：

a:link {color:#111} a:hover {color:#222} div:first-child {color:#333} div:nth-child(3) {color:#444} 

儘管這些條件不是基於DOM的，但結果每個都是做用於一個完整的元素，好比整個連接，段落，div等等。

僞元素：做用於元素的一部分

例如：

p::first-line {color:#555} p::first-letter {color:#666} a::before {content : "hello world";} 

僞元素做用於元素的一部分：一個段落的第一行 或者 第一個字母。

總結：

僞元素其實至關於僞造了一個元素，例如before,first-letter達到的效果就是僞造了一個元素，而後添加了其相應的效果而已；

而僞類沒有僞造元素，例如first-child只是給子元素添加樣式而已。

僞元素和僞類之因此這麼容易混淆，是由於他們的效果相似並且寫法相仿，但實際上 css3 爲了區分二者，已經明確規定了僞類用一個冒號來表示，而僞元素則用兩個冒號來表示。

但由於兼容性的問題，因此如今大部分仍是統一的單冒號，可是拋開兼容性的問題，咱們在書寫時應該儘量養成好習慣，區分二者。