使用 CSS 的 ::before 自訂 HTML Ordered Lists 的編號樣式

這裡介紹如何使用 CSS 的 ::before selector 自訂 HTML ordered lists（ol）的編號樣式。

一般 HTML 的 ordered lists（ol）呈現的效果是這樣：

1. 這是第一個項目
2. 這是第二個項目
3. 這是第三個項目
4. 這是第四個項目
5. 這是第五個項目

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

1. 這是第一個項目
2. 這是第二個項目
3. 這是第三個項目
4. 這是第四個項目
5. 這是第五個項目

以下是實作步驟。

Step 1
首先，將既有的編號拿掉，並加上一些邊界空白的設定。

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

Step 2
使用 counter-increment 自訂計數器的名稱。

.custom-counter li {
  counter-increment: step-counter;
}

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

Step 3
使用 ::before 在每個項目之前插入自訂的編號，並設定編號的樣式。

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

這裡的 counter 要對應上面的自訂計數器名稱（這裡是 step-counter），這樣瀏覽器就會自動計算 li 的個數，依序編號。