看了《CSS SECRET》（CSS揭秘）這本前端大作，對 CSS 有了更深理解，發了以下這篇文章：
CSS 只是個簡單的佈局？前端女程序員教你，花樣玩轉CSS
https://www.toutiao.com/i6509840876636733966/
採用單標籤完成各種圖案，許多圖案與本文有關。】
本文主要講解一下 偽元素 before 和 after 各種妙用。
:before和::before的區別
有時候你會看到偽類元素使用了兩個冒號 (::)， 而不是一個 (:)，這是 CSS3 規範中的一小部分要求，目的就是為了區分偽類和偽元素，大多數瀏覽器都支持它們的表示方式。
。
本文要講的就是偽元素 before 和 after ，下文會詳細介紹這兩個偽元素的魅力。
利用 after 清除浮動
這個做前端的人都知道，運用 after 偽元素清除頁面浮動，簡單的東西就不說了。
偽元素與 css sprites 雪碧圖
這個比較老了。雪碧圖大家不陌生，通過將多個圖片 icon 合一圖，從而減少 http 請求，很多網站對雪碧圖的需求還是較大的。
但在製作雪碧圖的過程中，或者現在很多的打包工具自動生成的雪碧圖，都會存在著，需要為每個 icon 需要預留多少邊距的問題。看下圖：
單個顏色實現按鈕 hover 、active 的明暗變化
大概是這樣（下圖）：
為了減輕運營同學的負擔，做到只配置一個背景色不配置 hover 和 active 顏色讓按鈕也能自適應跟隨變化。是的，用上 before、after 兩個偽元素可以做到。
顏色小知識
有的時候，設計師們希望通過一些比較特殊的幾何圖形，表達不同的意思。
變形恢復
偽元素實現換行，替代
換行標籤
運用 after 偽元素，可以有一種非常優雅的解決方案：
通過給元素的 after 偽元素添加 content 為 "\A" 的值。這裡 \A 是什麼呢？
增強用戶體驗，使用偽元素實現增大點擊熱區
這裡，偽元素也是可以代表其宿主元素來響應的鼠標交互事件的。藉助偽元素可以輕鬆幫我們實現，我們可以這樣寫：
當然，在 PC 端下這樣子看起來有點奇怪，但是合理的用在點擊區域較小的移動端則能取到十分好的效果，效果如下：
more magic -- 單標籤圖案
單標籤實現瀏覽器圖標：
單標籤天氣圖標：
那麼會有哪些標籤不支持偽元素？
希望這篇文章對大家有所幫助，尤其是在對問題解決的思維層面上。
到此本文結束，如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。
如果本文對你有幫助，請點下推薦轉發。
【CSS 只是個簡單的佈局？前端女程序員教你，花樣玩轉CSS：https://www.toutiao.com/i6509840876636733966/ （前端程序員，值得一看）】
閱讀更多 編程王者之路 的文章
