::before與::after兩個偽元素其實是CSS3中的內(nèi)容卢未，然而實際上在CSS2中就已經(jīng)有了這兩者的身影括尸，只不過CSS2中是前面加一個冒號來表示（:before和:after）侥锦。今天主要講講這兩個偽元素該如何使用。
一雷滋、與普通元素一樣可以給其添加樣式
比如說我想在文字前面添加一個圖標，如果我用普通元素寫的話我可以這樣寫：
/*CSS*/
.del{ font-size: 20px;}
.del i{ display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle;
background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
.del span{ vertical-align: middle;}
/*HTML*/
<div class="del"><i></i><span>刪除</span></div>
但是放個空的 i 標簽總感覺很不爽文兢，直接把它去掉吧晤斩！
/*CSS*/
.del{ font-size: 20px;}
.del::before{ content: ""; display: inline-block; width: 20px; height: 25px; margin-right: 2px; vertical-align: middle;
background: url("imgs/delete.png") no-repeat center; background-size: 100%;}
.del span{ vertical-align: middle;}
/*HTML*/
<div class="del"><span>刪除</span></div>
這里就直接用::before偽元素代替了空的 i 標簽，兩者效果相同：
同樣利用這一點姆坚，我們可以使用::after偽元素解決經(jīng)典清除浮動的問題：
.clearfix::after{ display:block; clear:both; content:""; overflow:hidden; height:0; }
當然澳泵，如果你網(wǎng)站還需要兼容IE8，那還是用:after吧旷偿，::after不兼容烹俗。
二、在元素中插入文本
有時候我可能需要在許多元素中同時加入相同的文字萍程，那么可以考慮用這兩個偽元素幢妄。例如：
/*CSS*/
.up:after{ content: '↑'; color: #f00;}
.down:after{ content: '↓'; color: #0f0;}
/*HTML*/
<p class="up">上升</p>
<p class="down">下降</p>
實現(xiàn)效果如下：
三、在元素中插入圖像
實現(xiàn)類似本文第一個例子中的圖片加文字效果茫负，也可以使用偽元素直接插入圖片而不需要使用背景圖蕉鸳，就像這樣：
/*CSS*/
.del{ font-size: 20px;}
.del::before{ content: url("imgs/delete.png"); display: inline-block; margin-right: 2px; vertical-align: middle; }
.del span{ vertical-align: middle;}
但是需要非常注意的是，使用這種方式插入的圖片并不能通過控制偽元素的大小來改變圖片的大小忍法，只能引入固定大小的圖片（這個略坑啊...）潮尝，所以個人覺得最好還是老老實實用背景圖片比較好。
四饿序、插入連續(xù)項目編號
可能你會說勉失，加入連續(xù)項目編號還不簡單嗎？直接用有序列表ol不就行了嘛原探！
是乱凿，確實是可以實現(xiàn)，就像這樣：
<p>我的愛好：</p>
<ol>
<li>吃飯</li>
<li>睡覺</li>
<li>打豆豆</li>
</ol>
這是Chrome下的效果：
看起來挺好咽弦，沒啥問題徒蟆，那我若想給前面的序號加粗呢？一臉懵逼了...
這時候你說型型，那我直接在每條文字前手動加標簽和數(shù)字段审，然后給標簽加上樣式不就行了么？
/*CSS*/
ul li{ list-style: none;}
ul li span{ font-weight: bold;}
/*HTML*/
<p>我的愛好：</p>
<ul>
<li><span>1.</span>吃飯</li>
<li><span>2.</span>睡覺</li>
<li><span>3.</span>打豆豆</li>
</ul>
沒錯闹蒜，現(xiàn)在是三條寺枉，要是是三十條抑淫，三百條，怎么辦型凳？一條條加丈冬？（很傻很天真...）
這時候若用純CSS的方式，還得用到偽元素：
/*CSS*/
ul li{ list-style: none; counter-increment: number;} //number相當于是個變量甘畅，隨便取名就好埂蕊，在偽元素中調(diào)用
ul li::before{ content: counter(number)"."; font-weight: bold;} //注意這里不同于JS，counter(number)與"."之間不需要加任何東西疏唾，直接連接就好
/*HTML*/
<p>我的愛好：</p>
<ul>
<li>吃飯</li>
<li>睡覺</li>
<li>打豆豆</li>
</ul>
效果如下：
那我如果不想要阿拉伯數(shù)字蓄氧，我就想用中文數(shù)字可以么？
可以槐脏！偽元素很好很強大喉童！
ul li{ list-style: none; counter-increment: number;}
ul li::before{ content: counter(number,cjk-ideographic)"、"; font-weight: bold;}
效果如下：
除了這個cjk-ideographic顿天，你還可以使用更多CSS中 list-style-type 屬性：（直接貼上w3cshool里面的表格）
