CSS Counter Guide
The Three Properties
/* 1. Initialize counter on a parent */
.container {
counter-reset: my-counter; /* starts at 0 */
counter-reset: my-counter 10; /* starts at 10 */
}
/* 2. Increment counter on each item */
.container li {
counter-increment: my-counter; /* adds 1 */
counter-increment: my-counter 2; /* adds 2 */
}
/* 3. Display the counter value */
.container li::before {
content: counter(my-counter); /* 1, 2, 3 */
content: counter(my-counter, upper-roman); /* I, II, III */
content: counters(my-counter, "."); /* 1.1, 1.2 (nested) */
}
Counter Styles
counter(name) /* 1, 2, 3 */
counter(name, decimal) /* 1, 2, 3 */
counter(name, decimal-leading-zero) /* 01, 02, 03 */
counter(name, upper-roman) /* I, II, III */
counter(name, lower-roman) /* i, ii, iii */
counter(name, upper-alpha) /* A, B, C */
counter(name, lower-alpha) /* a, b, c */
counter(name, lower-greek) /* α, β, γ */
Live Demo — Numbered List
- First item in the list
- Second item in the list
- Third item in the list
- Fourth item in the list
Nested Counter Example
- Chapter One
- Section 1.1
- Section 1.2
- Chapter Two
- Section 2.1
- Section 2.2
- Section 2.3
ol { counter-reset: section; list-style: none; }
li { counter-increment: section; }
li::before { content: counters(section, ".") " "; }