你所知道或不知道的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);
}
複製代碼

查看示例

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, '-');
複製代碼

說了這麼多，仍是查看示例吧

後記

實在不得不感嘆css的博大精深！

以上爲我的學習總結，若有錯漏，歡迎指正。

參考

• www.runoob.com/cssref/pr-g…
• www.zhangxinxu.com/study/20140…