[CSS] Custom Counter
keywords: 計數器
, ol
CSS Counter (計數器)可以客制化一些計數時的樣式,經常用在清單中,特別像是 ordered list 的情況。
- Counter @ 30 seconds of CSS
設定初始值
要使用 CSS 計數器,必須要先透過 counter-reset
來給予初始化的值,預設是 0。
/**
* 初始化一個計數器,並給予名稱(這裡叫做 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。
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.
參考
- Using CSS Counters @ MDN
- list-style @ MDN