關於僞元素before after總結

　  定義：css的僞元素，之因此被稱爲僞元素，是由於他們不是真正的頁面元素，html沒有對應的元素，可是其全部用法和表現行爲與真正的頁面元素同樣，能夠對其使用諸如頁面元素同樣的css樣式，表面上看上去貌似是頁面的某些元素來展示，其實是css樣式展示的行爲，所以被稱爲僞元素。

 　規範：css有一系列的僞元素，如:before，:after，:first-line，:first-letter等，這裏詳細介紹下:before和:after元素。注：css3中，爲了與僞類區分，僞元素前應該使用兩個冒號，即:hover僞類，::before僞元素。固然爲了向下兼容，用一個冒號也是能夠的，不過建議儘可能使用規範的寫法。

　特色：

• 僞元素不屬於文檔，因此js沒法操做它。點擊僞元素至關於觸發主元素的click
• 僞元素屬於主元素的一部分，所以點擊僞元素觸發的是主元素的click事件
• 原文說塊級元素纔能有:before, :after，實際上是不妥的，大部分行級元素也能夠設置僞元素，可是像img可替換元素，由於其外觀和尺寸有外部資源決定，那麼若是外部資源正確加載，就會替換掉其內部內容，這時僞元素也會被替換掉，可是當外部資源加載失敗時，設置的僞元素是能夠起做用的。

      用途： :before，:after這兩個僞元素分別表示元素內容的【前】【後】，利用這兩個僞元素能夠在元素內容的先後添加內容，其實這沒有什麼先後的概念，若是應用了absolute的特性以後，你能夠把這些僞元素放在任何位置，有了這兩個僞元素，就表明每一個元素都有兩個助手可供使用，靈活運用它們的話將會獲得不少有趣的實現，簡化許多實現。下面是主要的用途：

1. 　　checkbox和radio的美化，衆所周知html自帶的選擇框很是簡潔（實際上是簡陋），不符合現代人對美的追求，所以不少系統都對選擇框進行了美化。而有了這兩個僞元素以後，能夠結合label標籤，實現選擇框的美化，天馬行空，怎麼漂亮怎麼來。
2.        利用attr()來實現某些動態功能，這個特性的做用是用主元素的某個屬性的值做爲content的值，當這個屬性的值改變的時候，僞元素的值也會跟着改變，利用這個特性就能夠實現動態信息了
3.        與counter()結合實現序號問題，而不用使用列表元素。具體還要結合css的 counter-increment 和 counter-reset 屬性的用法。
4.        利用這兩個僞類，能夠實現各類須要簡單的圖標，如放大鏡，叉叉，箭頭等。
5.        擴大點擊區域。
6.        實現label，代替label功能。
7. 　　url()/uri(), 引用外部資源，例如圖片。
8.        清除浮動

　優勢

• 減小dom節點數
• 讓css幫助解決一部分js問題，讓問題變得簡單

　缺點

• 不利於SEO
• 代碼讀起來「可能」會有疑惑

 

附相關博客關於僞元素的介紹：

https://www.cnblogs.com/lvjiaqin/p/6555931.html

http://www.w3school.com.cn/css/css_pseudo_elements.asp

https://cloud.tencent.com/developer/article/1015717