Displaying the Current Step with CSS Counters

Celý článek

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!

HTML

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>Cart</button>
  <button>Shipping</button>
  <button>Checkout</button>
  <button>Thank You</button>

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

</div>

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

CSS

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 {
  counter-reset: 
    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.

The post Displaying the Current Step with CSS Counters appeared first on CSS-Tricks.