使用 CSS 的 ::before 自訂 HTML 列表樣式

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

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

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

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

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

步驟練習:

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

1
2
3
4
5
.custom-counter
padding-left: 10px
margin-left: 0
padding-right: 0
list-style-type: none

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

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

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

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

1
2
3
4
5
6
7
8
9
.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