大家可能對偽類和偽元素有點迷糊，在介紹具體用法之前，簡單介紹下偽類和偽元素。偽類大家聽的多了，偽元素可能聽到的不是那么頻繁，其實 CSS 對這兩個是有區分的。
這里整理總結下：
有時你會發現偽類元素使用了兩個冒號 (::) 而不是一個冒號 (:)，這是 CSS3 規范中的一部分要求，目的是為了區分偽類和偽元素，大多數瀏覽器都支持這兩種表示方式。
#id:after{
}
#id::after{
}
單冒號(:)用於 CSS3 偽類，雙冒號(::)用於 CSS3 偽元素。對於 CSS2 中已經有的偽元素，例如 :before，單冒號和雙冒號的寫法 ::before 作用是一樣的。
所以，如果你的網站只需要兼容 webkit、firefox、opera 等瀏覽器，建議對於偽元素采用雙冒號的寫法，如果不得不兼容 IE 瀏覽器，還是用 CSS2 的單冒號寫法比較安全。
更加具體的信息，可以看看 MDN 對偽類和偽元素的理解。
本文的主角就是偽元素 before 和 after ，下面將具體講講這兩個偽元素的魅力。
1、利用 after 清除浮動
這個估計是前端都知道，運用 after 偽元素清除頁面浮動，不做過多解釋。
.clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
.clearfix { *zoom:1; }
2、偽元素與 css sprites 雪碧圖
這個也是老姿勢了。雪碧圖大家應該也不陌生，通過將多個圖片 icon 合為一張圖，從而為了減少 http 請求，很多網站對雪碧圖的需求還是很大的。
但是在制作雪碧圖的過程中，或者現在很多的打包工具自動生成的雪碧圖，都存在着需要為每個 icon 需要預留多少邊距的問題。看看下圖：
–>
譬如上面這種情況（假設按鈕中的圖標是采用了雪碧圖），產品某天突然要求按鈕從狀態左變為狀態右，那么雪碧圖原先預留的位置邊距肯定就不夠了，導致其他圖形出現在按鈕中。
而我們通常不會為了一個小 icon 多添加一個標簽（不符合語義化）。
所以通常這種情況需要用到雪碧圖的話，都是在按鈕中設置一個偽元素，將偽元素的高寬設置為原本 icon 的大小，再利用絕對定位定位到需要的地方，這樣無論雪碧圖每個 icon 的邊距是多少，都能夠完美適應。
3、作為列表序號
怎樣作為列表序號呢？我先舉個栗子~
像這樣的1,2,3的序號一般大家是怎樣做的呢？用span？用圖片？是不是用了span后還要進行定位？是不是很麻煩呢？
現在我們可以用偽元素來做列表序號，而且列表的一項刪除了以后，其他的列表序號會自動改變，成為一個有順序的列表是不是很方便！
ul{ width:1000px; margin: 0 auto; counter-reset:li; } li{ list-style: none; } ul>li{ margin-top: 10px; } ul>li:before{ content: counter(li); counter-increment:li; padding: 0 5px; color: #fff; margin-right: 10px; }
超鏈接特效
舉例：配合 CSS定位實現一個鼠標移上去，超鏈接出現方括號的效果
a { position: relative; display: inline-block; outline: none; color: #fff; text-decoration: none; font-size: 32px; padding: 5px 20px; } a:hover::before, a:hover::after { position: absolute; } a:hover::before { content: "\5B"; left: -10px; } a:hover::after { content: "\5D"; right: -10px; }</style><a>鼠標移上去出現方括號</a>
制作圖案
用這兩個偽類，可以實現需要簡單的圖標，例如搜索的放大鏡，叉叉，箭頭等等
請欣賞：http://chokcoco.github.io/magicCss/html/index.html
擴大可點區域
當主元素實在沒辦法擴大自身的時候，可以利用:before, :after來實現可點區域的擴大，偽元素屬於主元素，點偽元素就是點擊主元素。
//利用這個樣式可以把可點區域擴大為40px寬，高度原理一樣
&:before { content: ""; display: block; position: absolute; width: 40px； left: 50%; margin-left: -20px; top: 0; height: 50px; //隨便 }
偽元素實現換行，替代<br>換行標簽
大家都知道，而行級元素則不會自動換行。但在項目中，有需求是需要讓行級元素也自動換行的，通常這種情況，我都是用換行標簽解決。而 《CSS SECRET》 中對標簽的描述是，這種方法不僅在可維護性方面是一種糟糕的實踐，而且污染了結構層的代碼。
運用 after 偽元素，可以有一種非常優雅的解決方案：
.inline-element::after{ content: "A"; white-space: pre; }
通過給元素的 after 偽元素添加 content 為 “A” 的值。這里 A 是什么呢？
有一個 Unicode 字符是專門代表換行符的：0x000A 。 在 CSS 中，這個字符可以寫作 “00A”， 或簡化為 “A”。這里我們用它來作為 ::after 偽元素的內容。也就是在元素末尾添加了一個換行符的意思。
而 white-space: pre; 的作用是保留元素后面的空白符和換行符，結合兩者，就可以輕松實現在行內級元素末尾實現換行。