最近在研讀 《CSS SECRET》（CSS揭秘）這本大作，對(duì) CSS 有了更深層次的理解，折騰了下面這個(gè)項(xiàng)目：
CSS3奇思妙想 -- Demo （請(qǐng)用 Chrome 瀏覽器打開，非常值得一看）。采用單標(biāo)簽完成各種圖案，許多圖案與本文有關(guān)。
也希望覺得不錯(cuò)的同學(xué)順手在我的 Github 點(diǎn)個(gè) star ： CSS3奇思妙想 。
正文從這里開始，本文主要講述一下 偽元素 before 和 after 各種妙用。
:before和::before的區(qū)別
在介紹具體用法之前，簡(jiǎn)單介紹下偽類和偽元素。偽類大家聽的多了，偽元素可能聽到的不是那么頻繁，其實(shí) CSS 對(duì)這兩個(gè)是有區(qū)分的。
有時(shí)你會(huì)發(fā)現(xiàn)偽類元素使用了兩個(gè)冒號(hào) (::) 而不是一個(gè)冒號(hào) (:)，這是 CSS3 規(guī)范中的一部分要求，目的是為了區(qū)分偽類和偽元素，大多數(shù)瀏覽器都支持這兩種表示方式。
1 #id:after{
2 ...
3 }
4 #id::after{
5 ...
6 }
單冒號(hào)(:)用于 CSS3 偽類，雙冒號(hào)(::)用于 CSS3 偽元素。對(duì)于 CSS2 中已經(jīng)有的偽元素，例如 :before，單冒號(hào)和雙冒號(hào)的寫法 ::before 作用是一樣的。
所以，如果你的網(wǎng)站只需要兼容 webkit、firefox、opera 等瀏覽器，建議對(duì)于偽元素采用雙冒號(hào)的寫法，如果不得不兼容 IE 瀏覽器，還是用 CSS2 的單冒號(hào)寫法比較安全。
更加具體的信息，可以看看 MDN 對(duì)偽類和偽元素的理解。
本文的主角就是偽元素 before 和 after ，下面將具體講講這兩個(gè)偽元素的魅力。
哪些標(biāo)簽不支持偽元素？（補(bǔ)充于2016.06.28）
我也是才知道這個(gè)姿勢(shì)。為了不誤導(dǎo)讀者，就趕緊補(bǔ)充一下。
偽元素雖然強(qiáng)大，但是還是有一些特定的標(biāo)簽是不支持偽元素 before 和 after 的。
諸如 <img> 、<input>、<iframe>，這幾個(gè)標(biāo)簽是不支持類似 img::before 這樣使用。
究其原因，要想要標(biāo)簽支持偽元素，需要這個(gè)元素是要可以插入內(nèi)容的，也就是說這個(gè)元素要是一個(gè)容器。而 input，img，iframe 等元素都不能包含其他元素，所以不能通過偽元素插入內(nèi)容。
（web前端學(xué)習(xí)交流群：328058344 禁止閑聊，非喜勿進(jìn)?。?/p>
利用 after 清除浮動(dòng)
這個(gè)估計(jì)是前端都知道，運(yùn)用 after 偽元素清除頁面浮動(dòng)，不做過多解釋。
1 .clearfix:after {content:"."; display:block; height:0; visibility:hidden; clear:both; }
2 .clearfix { *zoom:1; }
偽元素與 css sprites 雪碧圖
這個(gè)也是老姿勢(shì)了。雪碧圖大家應(yīng)該也不陌生，通過將多個(gè)圖片 icon 合為一張圖，從而為了減少 http 請(qǐng)求，很多網(wǎng)站對(duì)雪碧圖的需求還是很大的。
但是在制作雪碧圖的過程中，或者現(xiàn)在很多的打包工具自動(dòng)生成的雪碧圖，都存在著需要為每個(gè) icon 需要預(yù)留多少邊距的問題?？纯聪聢D：
譬如上面這種情況（假設(shè)按鈕中的圖標(biāo)是采用了雪碧圖），產(chǎn)品某天突然要求按鈕從狀態(tài)左變?yōu)闋顟B(tài)右，那么雪碧圖原先預(yù)留的位置邊距肯定就不夠了，導(dǎo)致其他圖形出現(xiàn)在按鈕中。
而我們通常不會(huì)為了一個(gè)小 icon 多添加一個(gè)標(biāo)簽（不符合語義化）。
所以通常這種情況需要用到雪碧圖的話，都是在按鈕中設(shè)置一個(gè)偽元素，將偽元素的高寬設(shè)置為原本 icon 的大小，再利用絕對(duì)定位定位到需要的地方，這樣無論雪碧圖每個(gè) icon 的邊距是多少，都能夠完美適應(yīng)。
單個(gè)顏色實(shí)現(xiàn)按鈕 hover 、active 的明暗變化
最近項(xiàng)目有個(gè)這樣的需求，根據(jù)不同的業(yè)務(wù)場(chǎng)景，運(yùn)營(yíng)需要配置一個(gè)按鈕的不同背景色值。但是我們知道，一個(gè)按鈕通常而言是有 3 個(gè)色值的，normal 狀態(tài)的，hover 狀態(tài)的和 active 狀態(tài)的，通常 hover 是比原色稍微亮一點(diǎn)，active 則是稍微暗一點(diǎn)。
大概是這樣（下圖）：
為了減輕運(yùn)營(yíng)同學(xué)的負(fù)擔(dān)，怎么樣做到只配置一個(gè)背景色不配置 hover 和 active 顏色讓按鈕也能自適應(yīng)跟隨變化呢。是的，用上 before、after 兩個(gè)偽元素可以做到。
顏色小知識(shí)
這里要科普一下顏色值的小知識(shí)。我們熟知的顏色表示法除了 #fff ，rgb(255,255,255)，還有 hsl(0, 100%, 100%)（HSV）。
以 HSL 為例，它是一種將 RGB 色彩模型中的點(diǎn)在圓柱坐標(biāo)系中的表示法。HSL 即色相、飽和度、亮度（英語：Hue, Saturation, Lightness）。
對(duì)于一個(gè)使用 HSL 表示的顏色，我們只需要改變 L （亮度）的值，就可以得到一個(gè)更亮一點(diǎn)或者更暗一點(diǎn)的顏色。
當(dāng)然改變亮度，還可以通過疊加透明層實(shí)現(xiàn)，這里使用偽元素改變按鈕背景色就是通過疊加半透明層實(shí)現(xiàn)。
簡(jiǎn)單來說，在背景色上方疊加一個(gè)白色半透明層 rgba(255,255,255,.2) 可以得到一個(gè)更亮的顏色。（這句話不是很嚴(yán)謹(jǐn)，假設(shè)一個(gè)元素背景是純白顏色，疊加白色半透明層也是不會(huì)更亮的）
反之，在背景色上方疊加一個(gè)黑色半透明層 rgba(0,0,0,.2) 可以得到一個(gè)更暗的顏色。
所以，我們用 before 偽元素生成一個(gè)與按鈕大小一致的黑色半透明層 rgba(0,0,0,.2)，在 .btn:hover:before 時(shí)顯示，用 after 偽元素生成一個(gè)與按鈕大小一致的白色半透明層 rgba(255,255,255,.2)，在 .btn:active:before 時(shí)顯示，就可以做到只配置一個(gè)背景底色，實(shí)現(xiàn) hover 、active 的時(shí)的明暗變化。
1 .pesudo:before{
2 position: absolute;
3 top: 0; right: 0; bottom: 0; left: 0;
4 z-index:-1;
5 background:rgba(0,0,0,.1);
6 }
7 .pesudo:hover:before{
8 content:"";
9 }
10 position: absolute;
11 top: 0; right: 0; bottom: 0; left: 0;
12 z-index:-1;
13 background:rgba(255,255,255,.2);
14 }
15 .pesudo:active:after{
16 content:"";
17 }
（web前端學(xué)習(xí)交流群：328058344 禁止閑聊，非喜勿進(jìn)！）
變形恢復(fù)
有的時(shí)候，設(shè)計(jì)師們希望通過一些比較特殊的幾何圖形，表達(dá)不同的意思。
用 CSS3 transfrom 屬性，我們可以輕松的得到一個(gè)梯形，菱形或者平行四邊形。有時(shí)我們?cè)O(shè)計(jì)師們希望在這些容器內(nèi)配上文字，譬如平行四邊形可以表達(dá)一種速度之感。
但是如上圖所示，內(nèi)容文字也會(huì)跟著 CSS3 變換一起發(fā)生了扭曲，通常我們會(huì)用一個(gè) div 做背景進(jìn)行變換，而文字則是放在另外一個(gè) div 中。
但是運(yùn)用偽元素，我們可以去掉這些不合語義化多余的標(biāo)簽，運(yùn)用 before 偽元素，將 CSS3 變換作用于偽元素上，這樣變形不會(huì)作用于位于 div 上的的文字，而且沒有使用多余的標(biāo)簽。
偽元素實(shí)現(xiàn)換行，替代<br>換行標(biāo)簽
大家都知道，塊級(jí)元素在不脫離正常布局流的情況下是會(huì)自動(dòng)換行，而行級(jí)元素則不會(huì)自動(dòng)換行。但在項(xiàng)目中，有需求是需要讓行級(jí)元素也自動(dòng)換行的，通常這種情況，我都是用
換行標(biāo)簽解決。而 《CSS SECRET》 中對(duì) <br /> 標(biāo)簽的描述是，這種方法不僅在可維護(hù)性方面是一種糟糕的實(shí)踐，而且污染了結(jié)構(gòu)層的代碼。 想想自己敲代碼以來，用的
標(biāo)簽還真不少。
運(yùn)用 after 偽元素，可以有一種非常優(yōu)雅的解決方案：
1 .inline-element::after{
2 content: "\A";
3 white-space: pre;
4 }
通過給元素的 after 偽元素添加 content 為 "\A" 的值。這里 \A 是什么呢？
有一個(gè) Unicode 字符是專門代表換行符的：0x000A 。 在 CSS 中，這個(gè)字符可以寫作 "\000A"， 或簡(jiǎn)化為 "\A"。這里我們用它來作為 ::after 偽元素的內(nèi)容。也就是在元素末尾添加了一個(gè)換行符的意思。
而 white-space: pre; 的作用是保留元素后面的空白符和換行符，結(jié)合兩者，就可以輕松實(shí)現(xiàn)在行內(nèi)級(jí)元素末尾實(shí)現(xiàn)換行。
增強(qiáng)用戶體驗(yàn)，使用偽元素實(shí)現(xiàn)增大點(diǎn)擊熱區(qū)
按鈕是我們網(wǎng)頁設(shè)計(jì)中十分重要的一環(huán)，而按鈕的設(shè)計(jì)也與用戶體驗(yàn)息息相關(guān)。讓用戶更容易的點(diǎn)擊到按鈕無疑能很好的增加用戶體驗(yàn)，尤其是在移動(dòng)端，按鈕通常都很小，但是有時(shí)由于設(shè)計(jì)稿限制，我們不能直接去改變按鈕元素的高寬。那么這個(gè)時(shí)候有什么辦法在不改變按鈕原本大小的情況下去增加他的點(diǎn)擊熱區(qū)呢？
這里，偽元素也是可以代表其宿主元素來響應(yīng)的鼠標(biāo)交互事件的。借助偽元素可以輕松幫我們實(shí)現(xiàn)，我們可以這樣寫：
1 .btn::befoer{
2 content:"";
3 position:absolute;
4 top:-10px;
5 right:-10px;
6 bottom:-10px;
7 left:-10px;
8 }
當(dāng)然，在 PC 端下這樣子看起來有點(diǎn)奇怪，但是合理的用在點(diǎn)擊區(qū)域較小的移動(dòng)端則能取到十分好的效果，效果如下：
more magic -- 單標(biāo)簽圖案
上面介紹的是偽元素眾多用法的一部分，偽元素的作用遠(yuǎn)不止于此。有了before 、after 兩個(gè)偽元素。一個(gè)標(biāo)簽其實(shí)可以相當(dāng)于 3 個(gè)標(biāo)簽來使用，而配合 CSS3 強(qiáng)大的 3D 變換、多重背景，多重陰影等手段，讓單標(biāo)簽作畫成為了可能，下面是我僅用單個(gè)標(biāo)簽，實(shí)現(xiàn)的一些動(dòng)畫效果：
單標(biāo)簽實(shí)現(xiàn)瀏覽器圖標(biāo)：
單標(biāo)簽天氣圖標(biāo)：
CSS3奇思妙想，采用單標(biāo)簽完成各種圖案 -- Demo
希望這篇文章對(duì)大家有所幫助，尤其是在對(duì)問題解決的思維層面上。到此本文結(jié)束，如果還有什么疑問或者建議，可以多多交流，原創(chuàng)文章，文筆有限，才疏學(xué)淺，文中若有不正之處，萬望告知。
如果本文對(duì)你有幫助，請(qǐng)點(diǎn)下推薦，寫文章不容易。
