Creates a custom list counter that accounts for nested list elements.
counter-reset
to initialize a variable counter (default 0
), the name of which is the value of the attribute (i.e. counter
).counter-increment
on the variable counter for each countable element (i.e. each <li>
).counters()
to display the value of each variable counter as part of the content
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, '.') ' ';
}
Would you like to help us improve 30 seconds of code?Take a quick survey
CSS, Visual
Creates a custom hover and focus effect for navigation items, using CSS transformations.
CSS, Visual
Creates a styled checkbox with animation on state change.
CSS, Visual
Creates a list with floating headings for each section.