Did you know you can build a counter using only CSS?
No JavaScript. Just native CSS features.
With a few underrated properties, you can make live counters in pure CSS:
-
counter-reset: Initializes or resets a counter. In this case, we start counting Pokémon from 0. -
counter-increment: Increases the counter whenever a condition is met. Here, every time an input is checked, it bumps the count. -
content: counter(): Displays the current value of the counter. It’s typically used inside:beforeor:afterpseudo-elements.
In this example:
- Each selected Pokémon increases the count
- The total is displayed instantly
- Zero JS involved
With almost 96% browser support, it’s pretty safe to use!
Here is a live example: https://codepen.io/emgarf/pen/RNNjrQe
I’m working on an ebook called “You Don’t Need JavaScript”.
To get notified when it launches 👉 https://theosoti.com/you-dont-need-js/