25.5K
ANDid you know you can reset the numbers on your ordered lists using ‘counter-reset’ in CSS?
Imagine you have your normal ordered list going 1,2,3,4,5 - well. You can totally reserve it!
All you would do is grab your ordered list element, use ‘counter-reset’, name your counter and initialize the counter to start at 5.
Next you would use ’counter-increment: countdown -1’ to decrease the counter for each <li>.
And finally you would use ‘content: counter()’ and pass through your named counter to dynamically display the current counter value as a prefix to each list item - and you can even add the string of a dot and space after it. Or anything you want really! Go wild!
This is great for having custom ordered lists such as ones you use for instructions, that keep their semantic meaning.
Don’t forget to check out my free 12 hour video course on my YouTube channel for more CSS tips.
—HTML—
<ol>
<li>Open box.</li>
<li>Take out pieces.</li>
<li>Arrange pieces.</li>
<li>Glue together.</li>
<li>Look in awe!</li>
</ol>
—CSS—
ol {
counter-reset: countdown 6;
}
li {
list-style: none;
counter-increment: countdown -1;
}
li::before {
content: “Step “ counter(countdown) “. “;
}
@aniakubow
