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

counter 基本用法

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

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

鋼鐵俠 美國隊(duì)長 雷神索爾

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

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

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

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

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

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

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

counter 進(jìn)階用法

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

鋼鐵俠 美國隊(duì)長 雷神索爾 神盾局 神鬼局 神經(jīng)局 九頭蛇 九頭牛 九頭豬

CSS一開始counter-reset可以指定多個(gè)計(jì)數(shù)器，通過一個(gè)空白字符進(jìn)行分隔，如果空白字符后面跟著數(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 還提供了另外一個(gè)counters 的功能，目的就是來解決層級結(jié)構(gòu)的麻煩事，在開始前可以先看看通過ul和li組合的清單布局結(jié)構(gòu)：

• 第一層
  • 第二層
    • 第三層
    • 第三層
    • 第三層
  • 第二層
  • 第二層
• 第一層
  • 第二層
  • 第二層

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

li{ list-style:decimal;}

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

第一層 第二層 第三層 第三層 第三層 第二層 第二層 第一層 第二層 第二層

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

counters 使用語法：counters(計(jì)數(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ǔ)上進(jìn)行了錯誤校正，如發(fā)現(xiàn)問題，歡迎你的指正

小結(jié)

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

創(chuàng)作挑戰(zhàn)賽新人創(chuàng)作獎勵來咯，堅(jiān)持創(chuàng)作打卡瓜分現(xiàn)金大獎

總結(jié)

以上是生活随笔為你收集整理的css before after用法_CSS 伪元素基础知识：content 与counter 实用技巧（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。