Displaying the Current Step with CSS Counters

Displaying the Current Step with CSS Counters 3

Say you have five buttons. Each button is a step. If you click on the fourth button, you’re on step 4 of 5, and you want to display that.

This kind of counting and displaying could be hard-coded, but that’s no fun. JavaScript could do this job as well. But CSS? Hmmmm. Can it? CSS has counters, so we can certainly count the number of buttons. But how do we calculate only up to a certain button? Turns out it can be done.

Thanks to Jan Enning for emailing in about this trick, it’s very clever!


It doesn’t have to be buttons; it just needs to be some sibling elements we can count. But we’ll go ahead and use buttons here:

<div class="steps">

  <button class="active">Shop</button>
  <button>Thank You</button>

  <div class="message"></div>


The empty .message div there will be where we output our step messaging with CSS content.


The trick is that we’re actually going to use three counters:

  1. A total count of all the buttons
  2. A count of the current step
  3. A count of how many remaining steps are after the current step
.steps {
    currentStep 0 
    remainder 0 
    totalStep 0;

Now let’s actually do the counting. To count all buttons is straightforward:

button {
  counter-increment: totalStep;

Next, we need another thing to count that will also count the buttons. We can use a pseudo-element that’s only purpose is to count buttons:

button::before {
  content: "";
  counter-increment: currentStep;

The trick is to stop counting that pseudo-element on all the elements after the active element. If we’re using an .active class that looks like this:

button.active ~ button::before {
  /* prevents currentStep from being incremented! */
  counter-increment: remainder;

We’re counting the remainder there, which might also be useful, but because we’re only incrementing the remainder, that means we’re not counting the currentStep counter. Fancy, fancy.

Then we can use the counters to output our messaging:

message::before {
  content: "Step: " counter(currentStep) " / " counter(totalStep);

Here it is!

There is a little JavaScript there so you can play with moving the active state on the button, but the counting and messaging is all CSS.

This post was originally posted here

Check out our Starter Sites built with #ToolWeLove including Toolset, Elementor Pro, and Astra Pro.


Share this page
Share on facebook
Share on google
Share on twitter
Share on linkedin
Share on email
Proposal for CSS @when

CSS is on a tear lately. Again, I’ve heard of a brand new thing I’ve never seen before, and again it’s via Miriam: CSS Conditionals.

Read More »
Cascade Layers?

There is a new thing coming in CSS: @layer. As with all new things, it takes time to really wrap your head around it. And

Read More »