CSS 中的 counter 屬性

用擬元素來自製列表清單。

作法

當你想要產生一串「按照順序編號」的元素時，除了使用 HTML 中的 <ol> 之外，你也能用 CSS 中的 counter 屬性來實作。

至於支援度的話不用擔心，除了舊版 IE 都可以運作：

但要注意，counter 是利用擬元素的 content 屬性來設定數字的，所以必須搭配擬元素來使用。

直接來看例子吧：

<!-- 一個 box 裡裝了 6 種顏色的方塊 -->
<div class="box">
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
  <div class="item"></div>
</div>

.box {
  // 在祖先元素初始化計數器
  // 看你想取什麼名字
  counter-reset: order;
  // 也可以指定初始值，這樣就會從 10 開始算
  // 如果要顯示 0, 1, 2... 可以設成 "-1"
  counter-reset: order 10;
}
.item::before {
  // 把計數器的值寫到 content 裡
  content: counter(order);
  // 填入要遞增的計數器名稱
  counter-increment: order;
}

設定完成後，就能得到以下結果：

🚀 Codepen：點這裡

更多的設定細節，可以到上面 Codepen 裡面看註解，或是參考這裡

最後做一些補充：

• counter-reset可以設定在任何的「祖先元素」上，不一定要直屬父層。
• 計數器是透過 counter-increment 來做計數，所以請設定在要計算的元素上。