前言

好久沒有上蘋果官網了，週三用手機登入 蘋果官網 的時候，發現蘋果官網的導航用了自適應，並且把所有的導航都濃縮在一個開啟關閉的小圖示，如下圖：

apple-nav

看見左上角這個兩槓的東東了嘛，點選彈出導航，再點選然後隱藏，右鍵審查元素看了一下，用到的是svg標籤

<svg x="0px" y="0px" width="100%" viewBox="0 0 96 96" class="gh-svg gh-svg-top" enable-background="new 0 0 96 96"><rect width="32" height="4" x="32" y="46" class="gh-svg-rect gh-svg-rect-top"></rect></svg>

我突然想到了這種效果其實也是可以用偽元素:after來實現的嘛，於是就有這篇文章了。

偽類和偽元素

偽元素在css3的寫法是::after，都是以雙冒號開頭，而css2的寫法則是這樣:after，並且需要把偽元素（pseudo element）和偽類（pseudo classes）區分開來，他們擁有偽類的寫法，但是卻不是偽類，目前已知的偽元素就只有5個，分別是before,after,first-line,first-letter,selection，更多詳情請點選這裡→pseudo elements一般情況下我們見得最多得就是偽類，比如我們一開始寫css重置樣式的時候最最最常用到的是連結重置：

a:hover,  
a:link,  
a:visited,  
a:active {  
    text-decoration:none;
}

這個就是典型的偽類，關於更多偽類知識，不妨點選右側→Pseudo-classes。

偽元素用途

偽元素的用法目前最多的應該是 清除浮動、圖示製作這些，但是不管是當做什麼用途，其真正意義應該是為css生成內容助力，一般這些用到偽元素的地方都會用到content內容生成屬性，所以暫且就這麼認為吧，雖然:selection選擇偽元素不常跟，但是對於after,before這種常用偽元素就經常跟content屬性在一起了。

對於偽元素的研究，各位可以前往鑫哥的部落格，他對偽元素的研究更加的細緻和透徹→

張鑫旭對偽元素研究，看完了這些文章估計你會對這類元素頗有一番醐醍灌頂的趕腳哈。qq表情

其實就是利用偽元素before,after來構造一個圖形，因為沒有利用任何的圖片都是基於css程式碼來寫，因此當點選按鈕之後的程式碼需要藉助 transform 變形屬性。
當前按鈕的效果
點選之前
點選之後的效果
點選之後
最終效果如下：
點選之後

css 

.btn{ display:inline-block;width:100px;height:100px;text-align:center; opacity:initial}
.cur,.hover{
    position:relative;
    display:inline-block;
    vertical-align:top; 
    height:4px;
    width:35px;
    top:48px;
}
.cur:before,.cur:after,.hover:before,.hover:after{
    position:absolute;
    content:"";
    background-color:#fff;
    height:100%;
    width:100%;

}
.cur:before{
    transform:translateY(-200%);    /*當前按鈕，Y軸向上移動-200%，因為span的高度為4px，因此span整體向上移動4px*/
    -webkit-transform:translateY(-200%);    
}
.cur:after{
    transform:translateY(200%);     /*同理，span整體向下移動4px*/
    -webkit-transform:translateY(200%);    
}
.hover{ background-color:transparent;}
.hover:before{
    transform:translateY(0) rotate(45deg);          /*點選之後，Y軸恢復到原點座標，然後順時針旋轉45°角*/
    -webkit-transform:translateY(0) rotate(45deg);
}
.hover:after{
    transform:translateY(0) rotate(-45deg);         /*點選之後，Y軸恢復到原點座標，然後逆時針旋轉-45°角*/
    -webkit-transform:translateY(0) rotate(-45deg);
}

html+JS 

 html <div class="top">  
 <a href="javascript:void(0)" class="btn"><span class="cur"></span></a>  
</div>  
JQ <script type="text/javascript">  
$(".btn").click(function(){  
 $("span").toggleClass("hover");  
});  
</script>

表格佈局

你也許肯定猜想不到這貨還可以來構造一個偽造的表格，這真心不是蓋的，不信自個前往美團手機網，如圖：
美圖手機網

這個三列的表格就是用:after+:before偽元素來偽造出來的，偽元素這個稱號給得真心沒有白給。具體的樣式，各位自個去研究哈，大同小異，記得不要忘記content

後話

當然偽元素的應用還不止這些小應用，估計還應該更有大有作為的，重複發揮我們的想象力，也許哪天構造個天馬行空的東東出來也不一定哦，期待你在評論貼出你所認為牛逼的偽元素應用哈。