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

counter 基本用法

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

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

鋼鐵俠 美國隊長 雷神索爾

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

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

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

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

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

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

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

counter 進階用法

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

鋼鐵俠 美國隊長 雷神索爾 神盾局 神鬼局 神經局 九頭蛇 九頭牛 九頭豬

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

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) '. ';}

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

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

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

li{ list-style:decimal;}

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

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

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

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

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

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

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

由于網頁為繁體內容，術語描述和話術與我們有差異的問題，筆者在保證不改變原意的基礎上做了調整，并在此基礎上進行了錯誤校正，如發現問題，歡迎你的指正

小結

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

創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。