PJCHENder 未整理筆記

[CSS] Custom Counter

2017-10-06

[CSS] Custom Counter

@(CSS)

keywords: 計數器, ol

CSS Counter (計數器)可以客制化一些計數時的樣式,經常用在清單中,特別像是 ordered list 的情況。

設定初始值

要使用 CSS 計數器,必須要先透過 counter-reset 來給予初始化的值,預設是 0。

1
2
3
4
5
6
/**
* 初始化一個計數器,並給予名稱(這裡叫做 section),預設是 0
**/
div {
counter-reset: section;
}

顯示計數值

計數器初始化後,可以透過 counter-increment 來增加或減少計數器的值。

計數器值的顯示可以透過在偽元素的 content 屬性中使用 counter()counters() 的函式:

  • counter():counter(name), counter(name, style)
  • counters(): counters(name, string), counters(name, string, style)

其中,style 指的是 CSS 中的 list-style

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

h3::before {
counter-increment: section; // 遞增計數器 section 的值
content: counter(section); // 顯示計數器 section 的值
}

li::before {
counter-increment: nested;
content: counters(nested, ".") " ";
}

li::before{
counter-increment: list;
content: counter(list, upper-roman)".";
}

程式範例

See the Pen [CSS] Counter by PJCHEN (@PJCHENder) on CodePen.

參考

掃描二維條碼,分享此文章