例

以下示例將在每個鏈接后的括號內(nèi)加上網(wǎng)址：

a:after

{

content: " (" attr(href) ")";

}

屬性定義及使用說明

ontent 屬性與 :before 及 :after 偽元素配合使用，來插入生成內(nèi)容。

瀏覽器支持

所有主流瀏覽器都支持Content屬性。

注意： IE8只有指定!DOCTYPE才支持Content屬性。

Content屬性值

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

CSS 偽元素基礎(chǔ)知識：before 與after （一），筆者已經(jīng)介紹過 CSS 里的::before 和::after 這兩個偽元素，以及content 相關(guān)的用法，這篇將針對content 搭配counter (計數(shù)器) 進行一些有趣的應(yīng)用，相信熟練之后搞不好能做出很好玩的內(nèi)容。

counter 基本用法

在CSS里頭，counter是個很有意思的功能，最常見得就是如果我們使用list清單，樣式選擇decimal十進制，當(dāng)清單內(nèi)容變多的時候數(shù)字也會隨著遞增，底層貌似就是使用counter的原理，也因為counter 所產(chǎn)生的數(shù)值并不實際存在于網(wǎng)頁的元素內(nèi)，所以如果我們要在清單元素之外使用，就必須透過::before 或::after的content來實現(xiàn)。

counter最的基本用法一定要有一個父元素和子元素(類似list的原理，比如使用ul包著li )，所以頁面布局會類似下面這段html：

<div>
 <span>鋼鐵俠</span>
 <span>美國隊長</span>
 <span>雷神索爾</span>
</div>

在CSS里頭，先針對div父元素使用counter-reset:num;進行計數(shù)器初始化的設(shè)置，里面num是計數(shù)器累以數(shù)值計算的設(shè)置，接著可以在span::before里面看到counter-increment:num;這一段，這段的作用是把num累加上去，預(yù)設(shè)數(shù)值為加1，接著就通過content這個屬性顯示出來。

計數(shù)器預(yù)設(shè)的顯示語法為：counter(計數(shù)器名稱, list-style-type)

div{
 counter-reset:num;
}
span{
 display:block;
}
span::before{
 counter-increment:num; 
 content:counter(num) '. ';
}

通過指定一開始counter-reset 的起始計數(shù)值，還有counter-increment累加的遞增數(shù)值（步長），還可以指定從某個數(shù)值開始計數(shù)。

div{
 counter-reset:num 3;
}
span{
 display:block;
}
span::before{
 counter-increment:num 2; 
 content:counter(num) '. ';
}

如果要更換數(shù)字的樣式，也可以透過計數(shù)器的第二個設(shè)定值list-style-type來更改，下面的例子就是將樣式更改為georgian。

div{
 counter-reset:num;
}
span{
 display:block;
}
span::before{
 counter-increment:num; 
 content:counter(num, georgian) '. ';
}

counter 進階用法

除了指定單一個變數(shù)外，counter 也可以同時指定多個變數(shù)，例如下面這段HTML，有三個類別在里面，我分別用span、i 和b 來分類。

<div>
 <span>鋼鐵俠</span>
 <span>美國隊長</span>
 <span>雷神索爾</span>
 <i>神盾局</i>
 <i>神鬼局</i>
 <i>神經(jīng)局</i>
 <b>九頭蛇</b>
 <b>九頭牛</b>
 <b>九頭豬</b>
</div>

CSS一開始counter-reset可以指定多個計數(shù)器，通過一個空白字符進行分隔，如果空白字符后面跟著數(shù)字則是起始值，沒有數(shù)字預(yù)設(shè)為1，當(dāng)這樣設(shè)定之后，就可以看到不同類別的數(shù)字代號就不同。

div{
 counter-reset:num numi 2 numb 5;
}
span, i, b{
 display:block;
}
span::before{
 counter-increment:num; 
 content:counter(num) '. ';
}
i::before{
 counter-increment:numi 2; 
 content:counter(numi) '. ';
}
b::before{
 counter-increment:numb 5; 
 content:counter(numb) '. ';
}

如果遇到了層級結(jié)構(gòu)（目錄結(jié)構(gòu)），需要一層層的展開( 例如：1 > 1.1 > 1.1.1 )，采用上述的作法可能就會復(fù)雜許多，好在counter 還提供了另外一個counters 的功能，目的就是來解決層級結(jié)構(gòu)的麻煩事，在開始前可以先看看通過ul和li組合的清單布局結(jié)構(gòu)：

<ul>
 <li>第一層
 <ul>
 <li>第二層
 <ul>
 <li>第三層</li>
 <li>第三層</li>
 <li>第三層</li>
 </ul>
 </li>
 <li>第二層</li>
 <li>第二層</li>
 </ul> 
 </li>
 <li>第一層</li>
 <ul>
 <li>第二層</li>
 <li>第二層</li>
 </ul>
</ul>

傳統(tǒng)的清單如果將list-style設(shè)為decimal，同樣可以具備數(shù)字連續(xù)的功能，但相對來說要做一些特殊變化就辦不到了。

li{
 list-style:decimal;
}

通過content 和counters 的搭配，我們就可以告別預(yù)設(shè)值的困擾，甚至可以在不使用清單ul 和li 的狀況下，實現(xiàn)和清單一模一樣的效果，舉例來說，我們純粹通過div 模擬一個清單的布局( 仍然必須是有父元素和子元素的概念)，里面的樣式b 就等于是ul，樣式a 就等于是li：

<div class="a">第一層
 <div class="b"> 
 <div class="a">第二層
 <div class="b">
 <div class="a">第三層</div>
 <div class="a">第三層</div>
 <div class="a">第三層</div>
 </div>
 </div>
 <div class="a">第二層</div>
 <div class="a">第二層</div>
 </div>
</div>
<div class="a">第一層
 <div class="b">
 <div class="a">第二層</div>
 <div class="a">第二層</div>
 </div>
</div>

由于b的外層沒有東西，所以一開始要把body 和b 都進行counter reset 的動作，接著通過counters 的使用，讓計數(shù)器的數(shù)值可以一個接著一個放進去，如此一來就可以做到原本清單不容易實現(xiàn)的效果了。

counters 使用語法：counters(計數(shù)器名稱, 分隔符, list-style-type)

body, .b{
 counter-reset:c;
}
.a::before{
 content:counters(c, ".") "：";
 counter-increment:c; 
}
div{
 margin-left:10px;
}

了解原理之后，通過::before 和::after 的交互應(yīng)用，就可以做出頗具特色的清單效果。

body, .b{
 counter-reset:c;
}
.a{
 box-sizing:border-box;
 position:relative;
 line-height:40px;
}
.a .a{
 padding-left:30px;
}
.a::after{
 content:'';
 box-sizing:border-box;
 display:inline-block;
 position:absolute;
 z-index:-1;
 top:0;
 left:0;
 width:100%;
 height:40px;
 margin-left:30px;
 box-shadow:inset 0 2px #666;
 background:#eee;
}
.a::before{
 content:counter(c, upper-roman);
 counter-increment:c;
 display:inline-block;
 width:30px;
 height:40px;
 background:#666;
 color:#fff;
 text-align:center;
 margin-right:5px;
}

文章來源：https://www.oxxostudio.tw/articles/201706/pseudo-element-2.html

原文作者：oxxostudio

由于網(wǎng)頁為繁體內(nèi)容，術(shù)語描述和話術(shù)與我們有差異的問題，筆者在保證不改變原意的基礎(chǔ)上做了調(diào)整，并在此基礎(chǔ)上進行了錯誤校正，如發(fā)現(xiàn)問題，歡迎你的指正

小結(jié)

原本網(wǎng)頁里面使用的清單列表展示，如果要進行樣式的修改、或是一些編號的設(shè)置，往往都要通過JavaScript來實現(xiàn)，如果熟練了counter的用法，搞不好純粹使用CSS 就能取代掉大部分JavaScript也說不定呢，更多的驚喜有待你的發(fā)現(xiàn)。