CSS Counter Guide

/* 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(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) /* α, β, γ */

ol { counter-reset: section; list-style: none; } li { counter-increment: section; } li::before { content: counters(section, ".") " "; }