CSS only counter component
This idea started with a space invaders generator I recently made. If you look at the randomize button, you'll notice the number on the dice changes from five to three when you hover over it. A friend then said, "It would be really cool if you showed a different number every time you hover."
That got me thinking, could I make this using CSS only? It's trivial to do in a few lines of JavaScript, which I'll probably do at some point.
Before diving deeper, I decided to simplify the problem by first making a basic counter component. Since the solution had to be CSS-only, we'd need to render all the numbers before hand and then select one at a time using CSS - which felt a lot like how radio inputs work.
To make a counter, we need to somehow select the checked input's label, as well as the previous and next ones, using CSS.
Lucky for us, we live in the future where the :has selector exists. If you had shown me :has back when we were still dealing with IE6, it would have completely blown my mind.
