儘量地使用僞元素

僞元素是一個好東西，可是不少人都沒怎麼用，由於他們以爲僞元素太詭異了。其實使用僞元素有不少好處，最大的好處是它能夠簡化頁面的html標籤，同時用起來也很方便，善於使用僞元素可讓你的頁面更加地簡潔優雅。

1. 僞元素使用場景

僞元素通常是用於畫圖，特別是那種可有可無的分隔線、點之類的小元素，以下圖的綠框所示：

上面第一張圖的分隔線，就是用before畫的。只須要給div套一個類，這個類寫一個before，那麼相應的div就會帶上分隔線，而不用每加一個內容，就得手動添加一個span來畫那個分隔線。

2. 什麼是僞元素

僞元素是一個元素的子元素，而且它是inline行內元素。給一個標籤加上before和after，用瀏覽器檢查：

能夠看到before成爲了這個標籤的第一個子元素，而after成爲了它的最後一個子元素。

這樣其實至關於，本身寫了兩個span：

可是它跟span爲不太同樣，由於僞元素是僞的，僞的意思就是說，你沒法用js獲取到這個僞元素，或者增、刪、改一個僞元素，因此僞元素的優勢就體如今這裏了——你能夠用僞元素製造視覺上的效果，可是不會增長JS查DOM的負擔，它對JS是透明的。因此即便你給頁面添加了不少僞元素，也不會影響查DOM的效率。同時，它不是一個實際的html標籤，能夠加快瀏覽器加載html文件，對SEO也是有幫助的。

3. 使用僞元素的案例

1.畫分割線

像下面的這個or：

它的html結構是：

 

 

 

 

 

XHTML

 

1

<p>or</p>

就是一個p標籤。左右兩條線用before和after畫出來：

畫分隔線

 

 

 

 

 

CSS

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

.or{     text-align: center; } .or:after, .or:before{     content: "";     position: absolute; /* 注意把一個元素absolute定位後會強制把它 */     top: 12px;     height: 1px;     background-color: #ccc;     width: 200px } .or:after{     right: 0; } .or:before{     left: 0; }

注意上面代碼第7行，雖然before和after是一個行內元素，可是absolute定位後會把它強制display:block，即便你再dislay:table-cell之類的也無論用。

假設還有其它地方須要用到這種線，那麼我只要給那個標籤套一個or的類就能夠了，假設頁面有n個相同的地方須要用到，那麼頁面就減小了2n個標籤。一個頁面會有不少視覺輔助性元素，這些元素均可以用僞元素畫。

2. 清除浮動

「大大有名」的清除浮動clearfix大法就是藉助僞元素。何謂清除浮動——一個父元素的全部子元素若是都是浮動的，那麼這個父元素是沒有高度的，（1）若是這個父元素的相鄰元素是行內元素，那麼這個行內元素將會在這個父元素的區域內見縫插針，找到一塊放得下它的地方（2）若是相鄰的元素是一個塊級元素，那麼設置這個塊級元素的margin-top將會以這個父元素的起始位置做爲起點。這相應地體現了浮動的兩個特性：

1）浮動的元素不像absolute定位那樣，它並無脫離正常的文檔流，仍然佔據正常文檔流的空間。而這個空間正是正常文檔流的background的border，反過來講，其它元素將會圍繞着浮動的元素排列，浮動的元素就會佔據着它們的背景和border，以下：

第一段落圍繞着圖片排列

圖片的float屬性也影響了第二段落，也就是說float會佔據天然文本流相應位置元素的背景和邊框，即便和float的元素不在同一行

2）浮動的元素雖然還在父容器的區域內排列，但它不會撐起父容器的高度，父容器的高度跟沒有子元素同樣都是0px。爲何要這樣設計呢，假設浮動撐起了父容器的高度了，那麼就不會有上面（1）點的效果了，兩段文字環繞着一張圖片環繞，要知道浮動的出現是爲了解決圖片環繞文字的問題。（關於浮動更詳細的討論見我這篇文章：從三欄自適應寬度佈局到css佈局的討論）

因此結合這兩點，就能夠解決高度塌陷的問題。目標是要把父容器的高度撐起來，考慮到浮動了的元素並無脫離正常文檔流，而其它元素會圍繞着它環繞，因此清除浮動簡單有效的辦法就是讓環繞的元素不可環繞，把它變成一把尺子，放在最後面，把全部浮動的元素頂起來，而這把尺子就是一個設置了clear的塊級元素。由於塊級元素會換行，而且設置它兩邊不能跟着浮動的元素，因此它就跑到浮動元素的下面去，就像一把尺子把浮動元素的內容給頂起來了。而這個能夠用一個after實現，由於after就是最後一個子元素：

clearfix

 

 

 

 

 

CSS

 

1 2 3 4 5

.clearfix:after{     content: "";     display: table;     clear:both; }

行內元素是inline的，因此要改變它的display，不少人都忽略了before/after是一個行內元素。

3. 巧用僞元素作一些特殊效果

用before最大的好處是能夠用CSS控制，所以能夠經過動態地添加和刪除一個類，或者是結合:hover :active等僞類作一些效果。

1）例以下面的這種輸入框，有兩種狀態：編輯和查看，若是是查看，則不可點不可輸入，直觀的辦法是把一個個input和select禁掉，可是這樣太麻煩了。一個很簡單的辦法就是畫一個after把它蓋上去就好了

以下：

蓋住編輯區域

 

 

 

 

 

CSS

 

1 2 3 4 5 6 7 8

form:after{     content: "";     position: absolute;     left: 0;     top: 0;     width: 100%;     height: 100%; }

2）還能夠用僞元素展現文字，就是設置它的content，不過這種通常用得比較少，用得比較多的是圖標字體。能夠用它的content作一些有趣的事情，例以下面的計數，沒有用到一行js代碼，讀者能夠點擊試試：

蘋果香蕉梨柿子桃子

您選擇了種水果

這裏使用了CSS的計數器，結合僞元素，代碼以下：

 

 

 

 

 

XHTML

 

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

<style> .choose{   counter-reset: fruit; } .choose input:checked{     counter-increment: fruit; } .count:before{     content: counter(fruit); } </style> <div class="choose">     <label><input type="checkbox">蘋果</label>     <label><input type="checkbox">香蕉</label> </div>   <p>您選擇了<span class="count"></span>種水果</p>

3）還有人作了些小遊戲，例以下面這個ASCII編碼的遊戲，一個ASCII編碼由8位組成，經過打開不一樣的位，就會變成不一樣的字符，讀者能夠試試：

這個主要是結合::checked和counter，用before/after純CSS實現的，這種純粹是炫技。還有其它的一些小遊戲，詳見：Pure CSS Games with Counter-Increment

 

須要注意的是img/input等單標籤是沒有before/after僞元素的，由於它們自己是不能夠有子元素，若是你給img添加一個before，那麼會被瀏覽器忽略。

 

擴展閱讀：

1. Effective前端1：能使用html/css解決的問題就不要使用JS
2. Effective前端2：優化html標籤
3. Effective前端3：用CSS畫一個三角形
4. Effective前端4：儘量地使用僞元素
5. Effective前端5：減小前端代碼耦合