Counter
Creates a custom list counter that accounts for nested list elements.
- Use
counter-reset
to initialize a variable counter (default0
), the name of which is the value of the attribute (i.e.counter
). - Use
counter-increment
on the variable counter for each countable element (i.e. each<li>
). - Use
counters()
to display the value of each variable counter as part of thecontent
of the::before
pseudo-element for each countable element (i.e. each<li>
). The second value passed to it ('.'
) acts as the delimiter for nested counters.
<ul> <li>List item</li> <li>List item</li> <li> List item <ul> <li>List item</li> <li>List item</li> <li>List item</li> </ul> </li> </ul>
ul { counter-reset: counter; list-style: none; } li::before { counter-increment: counter; content: counters(counter, '.') ' '; }