這裡介紹如何使用 CSS 的 ::before
selector 自訂 HTML ordered lists(ol
)的編號樣式。
一般 HTML 的 ordered lists(ol
)呈現的效果是這樣:
- 這是第一個項目
- 這是第二個項目
- 這是第三個項目
- 這是第四個項目
- 這是第五個項目
我們這裡介紹如何使用 CSS 自訂每一個項目的編號:
- 這是第一個項目
- 這是第二個項目
- 這是第三個項目
- 這是第四個項目
- 這是第五個項目
以下是實作步驟。
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
的個數,依序編號。