<h1><a href="https://css-tricks.com/displaying-the-current-step-with-css-counters/">Displaying the Current Step with CSS Counters</a><br>But Without JavaScript</h1>

<p>Use arrows (&lt; &gt;) to navigate</p>

<div class="steps steps-1">

  <input id="shop-1" type="radio" name="options-1">
  <label for="shop-1">Shop</label>

  <input id="cart-1" type="radio" name="options-1">
  <label for="cart-1">Cart</label>

  <input id="shipping-1" type="radio" name="options-1" checked>
  <label for="shipping-1">Shipping</label>

  <input id="checkout-1" type="radio" name="options-1">
  <label for="checkout-1">Checkout</label>

  <input id="thankYou-1" type="radio" name="options-1">
  <label for="thankYou-1">Thank You</label>

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

</div>

<div class="steps steps-2">

  <input id="shop-2" type="radio" name="options-2" checked>
  <label for="shop-2">Shop</label>

  <input id="cart-2" type="radio" name="options-2">
  <label for="cart-2">Cart</label>

  <input id="shipping-2" type="radio" name="options-2">
  <label for="shipping-2">Shipping</label>

  <input id="checkout-2" type="radio" name="options-2">
  <label for="checkout-2">Checkout</label>

  <input id="thankYou-2" type="radio" name="options-2">
  <label for="thankYou-2">Thank You</label>

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

<p>PS: don't do this at home.</p>

.steps-1 {counter-reset: currentStep 1 remainder 0 totalStep 0;}
.steps-2 {counter-reset: currentStep 1 remainder -1 totalStep 0;}

label {counter-increment: totalStep;}

label::before {
  content: "";
  counter-increment: currentStep;
}
input:checked ~ label::before {
  counter-increment: remainder;
}
.message::before {
  content: "Step: " counter(currentStep) " / " counter(totalStep);
}
.steps-2 .message::before {
  content: "Step: " counter(currentStep) " / " counter(totalStep) " ("
    counter(remainder) " to go!)";
}
/* JUST FOR DEMO */
input {position:absolute;z-index:-1}
label {
  border: 0;
  background: #a5d6a7;
  color: black;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  font-family: inherit;
}
input:focus + label {
  box-shadow: 0 0 0 1px blue;
}
input:checked + label {
  background: #43a047;
}
body {
  padding-top: 1rem;
  font: 110% system-ui;
  background: #eceff1;
  text-align: center;
}
.message {
  padding: 1rem;
  font-size: 2rem;
  font-weight: 900;
}
.steps {
  margin: 0 0 3rem 0;
}
p {
  font-size: 1.4rem;
  margin: 2rem 0;
}