今天看到一篇關於 CSS 的自訂列表計數器的相關運用,來分享一下。

以下介紹如何使用 CSS 的 ::before selector 自訂 HTML ordered lists(ol)的編號樣式。

一般 HTML 的 ordered lists(ol)呈現的效果是這樣:

  1. aaaa
  2. bbbb
  3. cccc
  4. dddd
  5. eeee

我們這裡介紹如何使用 CSS 自訂每一個項目的編號:

步驟練習:

Step1.首先,將既有的編號拿掉,並加上一些邊界空白的設定。

.custom-counter
  padding-left: 10px
  margin-left: 0
  padding-right: 0
  list-style-type: none

Step2.使用 counter-increment 自訂計數器的名稱。

.custom-counter li
  counter-increment: step-counter
  margin: 10px 0

這裡的 step-counter 是一個自訂的名稱,您可以隨便取,只要跟隨後 ::before 中的名稱有對應好即可。

Step3.使用 ::before 在每個項目前面插入自訂的編號,並設定編號的樣式。

.custom-counter li::before
  content: counter(step-counter)
  margin-right: 5px
  font-size: 80%
  background-color: #2ecc71
  color: white
  font-weight: blod
  padding: 3px 8px
  border-radius: 4px

這裡的 counter 要對應 Step2. 的自訂計數器名稱(這裡是 step-counter),
這樣瀏覽器就會自動計算 li 的個數並依序編號,這樣就可以完成自訂列表編號的樣式囉^^

參考來源:http://www.gtwang.org/2014/09/customize-ordered-lists-pseudo-element.html