你所知道或不知道的CSS content屬性
css博大精深，很多屬性，往往都是看似熟悉，但是似乎又不能將其特性和用法完整地說出來。
content屬性，的確是很眼熟，也許很多童鞋和我一樣，和它初次見面，是在清除浮動的時候：
.clearfix:after{
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden
}
複製程式碼
如上所示，content 屬性與 :before 及 :after 偽元素配合使用，並可以接受一個字串作為值。
然而，除了字串之外，還能接受什麼樣的值呢？
定義和用法
content 屬性與 :before 及 :after 偽元素配合使用，來插入生成內容。
該屬性用於定義元素之前或之後放置的生成內容。預設是行內內容，不過可以用屬性 display 控制。
參考：w3school
可能的值
none、normal、inherit、string、url()、attr()、[no-]open-quote、[no-]close-quote、counter[s]
其中none、normal、inherit這三個和大多數屬性類似，故不做介紹。
string
string是常見的，上面清除浮動的例子，就是其中之一。
url()
url的用法，和background屬性有點類似，可以接受一個圖片url。不一樣的是，content屬性無法控制圖片的大小。
<div class="logo">Google</div>
.logo:before{
content: url(https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png);
}
複製程式碼
ofollow,noindex">檢視示例
attr
attr，顧名思義，就是將content內容設定為對應元素的某一屬性。
<p>
<span data-text='半'>半</span>
<span data-text='邊'>邊</span>
<span data-text='效'>效</span>
<span data-text='果'>果</span>
</p>
span{
font-size: 100px;
font-weight: bold;
position: relative;
color: #000;
}
span:before{
content: attr(data-text);
color: #F00;
position: absolute;
left: 0;
top: 0;
width: 50%;
overflow: hidden;
}
複製程式碼
quote · 引號
[no-]open-quote、[no-]close-quote，這四個值，常用於給元素前後加上引號，配合quotes 屬性一起使用。
<p>魯迅曾經說過: <span>能用CSS解決的問題就不要使用JS。<span>呵呵，誰說的？<span class="no-quote">呵呵，誰說的？</span></span></span></p> span { quotes: '“' '”' '‘' '’' '"' '"'; } span:before { content: open-quote; } span:after { content: close-quote; } .no-quote:after{ content: no-close-quote; } 複製程式碼
其中，quotes屬性定義要使用的引號。兩兩一組，前兩個值規定第一級引用巢狀，後兩個值規定下一級引號巢狀。如此類推。
需要注意的是，只有當偽元素:before設定content的值為open-quote才會有效果。
counter[s] · 計數器
這是一個很強大的東西，不妨先來體驗一下其強大的力量，檢視示例
與其搭配使用的，還有counter-reset、counter-increment兩個屬性。
counter-reset
用來標識計數器的作用域，值包括兩部分：第一部分為計數器的名字；第二部分為計數器的起始值，預設為0。此外，counter-reset還可以同時宣告多個計數器
counter-reset: n 0 counter-reset: n 2 counter-reset: n 0 m 0 p 0 複製程式碼
counter-increment
用來表明計數器實際用到的範圍，值包括兩部分：第一部分為計數器的名字；第二部分為計數器的遞增的值，預設為1。如：
counter-increment: n 2 counter-increment: n -1 /*遞減*/ 複製程式碼
那counter和counters有什麼不一樣呢？
counter()
counter方法可以接收兩個引數。第一個是計數器的名字，必填；第二個是計數器的樣式，也就是list-style-type，其支援的關鍵字值，就是list-style-type支援的那些值，比如disc | circle | square之類等等。
content: counter(n) content: counter(m, circle) 複製程式碼
counters()
counters方法主要用於巢狀計數，可以接收三個引數。第一個是計數器的名字，必填；第二個是字串，用於巢狀計數的分隔符，如1.1中的“.”；第三個引數是計數器的樣式，與counter一樣。其中，前兩個引數為必填
content: counters(n, '-'); 複製程式碼
說了這麼多，還是檢視示例吧