It takes as much energy to wish as it does to plan. — Eleanor Roosevelt
How about a classic CSS trick! This isn't even so tricky anymore, since CSS has counter-increment and counter-reset and such that is perfect for this. I just wanted to make sure you knew how it works and had some easy-to-copy examples at the ready.… Read article
In this post, we're going to demonstrate how we can use the source order independence of CSS Grid to solve a layout issue that's the result of a source order constraint. Specifically, we're going to look at checkboxes and CSS Counters—two concepts that rely on source order when used together.
Ordered lists aren't the only elements that can be automatically numbered. Thanks to the various counter-related properties, any element can be.
<body>
<section></section>
<section></section>
<section></section>
<section></section>
</body>body {
counter-reset: my-awesome-counter;
}
section {
counter-increment: my-awesome-counter;
}
section:before {
content: counter(my-awesome-counter);
}Each <section> will respectively start with "1", "2", "3", or "4".
You can control the style of the counter by comma separating the counter function. e.g. to make them use Roman numerals:
section:before {
content: counter(my-awesome-counter, upper-roman);
}