偽元素
我們知道隨著CSS規(guī)范進(jìn)一步完善，新增的CSS偽元素越來(lái)越多，但是在日常開(kāi)發(fā)中，我們常用的及瀏覽器支持情況比較樂(lè)觀的當(dāng)數(shù)before和after了。但是我們?cè)谌粘ｉ_(kāi)發(fā)中使用的都是:after {content: ”;}來(lái)清除浮動(dòng)，及新增一個(gè)元素（照顧到IE8瀏覽器這里使用單冒號(hào)）。但是content的可取值有哪些呢？
1. 字符串： content: “a string”- 注意：特殊字符必須使用unicode編碼；
2. 圖片： content: url(/path/to/benjamin.png) – 圖片以原始尺寸插入，不能調(diào)整大小。因圖片支持漸變，因此可以對(duì)偽元素使用漸變效果；
3. 無(wú)字符： content: “”- 這個(gè)在清除浮動(dòng)和設(shè)置背景圖片比較有用，我們可以設(shè)置背景圖片的width和height，甚至我們可以使用background-size屬性來(lái)調(diào)整背景圖片大??；
4. 計(jì)數(shù)器： content: counter(li)- 在:marker出現(xiàn)之前，對(duì)于設(shè)置列表序號(hào)樣式比較有用；具體參見(jiàn)下面代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

ol {   
    countercounter-reset: li;   
}   
ol>li {   
    position: relative;   
    padding-left: 2em;   
    line-height: 30px;   
    list-style: none;   
}   
ol>li:before {   
    position: absolute;   
    top: 8px;   
    left: 0;   
    height: 16px;   
    width: 16px;   
    line-height: 16px;   
    text-align: center;   
    content: counter(li);   
    countercounter-increment: li;   
    border-radius: 50%;   
    background-color: #ccc;   
    font-size: 12px;   
    color: #efefee;   
}  

PS：我們不能設(shè)置content: “<h2>Benjamin</h2>”，它不會(huì)解析按HTML代碼片段解析，而會(huì)解析為字符串；
5. content: attr(attrName)
content可以利用attr函數(shù)獲取屬性值，尤其使用在偽類(lèi)中比較方便。見(jiàn)如下代碼：

CSS Code復(fù)制內(nèi)容到剪貼板

<style type="text/css">   
    .list li {   
        list-style: none;   
        margin-bottom: 20px;