An Interest In:
Web News this Week
- April 23, 2024
- April 22, 2024
- April 21, 2024
- April 20, 2024
- April 19, 2024
- April 18, 2024
- April 17, 2024
August 24, 2019 02:35 am GMT
Original Link: https://dev.to/wangonya/automatically-counting-and-numbering-html-elements-with-css-counters-2bi7
Automatically counting and numbering HTML elements with CSS counters
Say you had an unknown number of <div>
elements and (for some reason) you wanted to count them and number each other them automatically - how would you do it? If you're like me, your first thought would be to use some kind of Javascript to play around with the DOM. What if I told you (insert Morpheus voice here) you can do it with CSS?
How to use CSS counters
Getting counters working requires three steps:
- Initialize the counter with
counter-reset
- Increment the counter with
counter-increment
- Show the current counter value with
counter()
It's pretty simple, really. The Pen below demonstrates how to count and number three <div>
elements.
Where would this be useful?
I discovered CSS counters while looking for a way to number images on my blog posts. That's one place it would really come in handy. Here's a quick example:
Original Link: https://dev.to/wangonya/automatically-counting-and-numbering-html-elements-with-css-counters-2bi7
Share this article:
Tweet
View Full Article
Dev To
An online community for sharing and discovering great ideas, having debates, and making friendsMore About this Source Visit Dev To