詳解 CSS 屬性 - :before && :after

如今咱們常常在 html 源碼中看到以下的寫法：

這裏的 ::after 和 ::before 就是咱們今天來探討的 css 僞元素之二 - :before && :after。

僞元素

首先咱們要明白什麼是僞元素，css 設置僞元素是爲了方便給某些選擇器添加特殊的效果。僞元素的語法格式通常爲：

selector:pseudo-element {property:value;}

這裏的 property 是指僞元素的屬性。此外，css 類也能夠與僞元素配合使用，格式以下：

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

僞元素就是這樣經過賦值給本身屬性從而給指定的選擇器添加上樣式的效果。

: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 是否爲必選項呢？咱們嘗試把 content 移除。

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

//沒有了 content 屬性，新內容天然是爲空的
//同時咱們查看 html 源碼會發現，:before 是沒有生效的

那麼咱們設爲空呢？

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

//新內容依然爲空
//此時 :before 生效

因此咱們明白，對於僞元素 :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>

//無內容

//鼠標移至 div 上時，新內容出現。

這裏須要注意二者使用的順序，僞元素應該位於後面，若是順序改成 .before:before:hover 是無效的。

配合取值函數 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 值爲出如今指定元素內容的後面，一樣舉例說明：

.after:after{content:'after you'; color:#F00;}
<div class="after">I </div>

//僞元素 :after 生成的新內容區域出如今指定元素內容的然後面

:after 其餘特徵與 :before 一致，能夠參考上文，在此就不贅述。

參考

http://www.bennadel.com/blog/2445-using-css-pseudo-elements-before-and-after.htm