Mostrar el paso actual con contadores CSS

Digamos que tienes cinco botones. Cada botón es un paso. Si hace clic en el cuarto botón, estará en el paso 4 de 5 y querrá mostrarlo.

Este tipo de conteo y visualización podría estar codificado, pero no es divertido. JavaScript también podría hacer este trabajo. ¿Pero CSS? Mmmmm. ¿Puede? CSS tiene contadores, por lo que ciertamente podemos contar la cantidad de botones. Pero ¿cómo calculamos sólo hasta un determinado botón? Resulta que se puede hacer.

HTML

No tienen que ser botones; sólo necesita que haya algunos elementos hermanos que podamos contar. Pero seguiremos adelante y usaremos botones aquí:

div  buttonShop/button  buttonCart/button  buttonShipping/button  buttonCheckout/button  buttonThank You/button  div/div/div

El div vacío .messageserá donde enviaremos nuestros mensajes de pasos con contenido CSS.

CSS

El truco es que en realidad vamos a utilizar tres contadores:

1. Un recuento total de todos los botones.
2. Un recuento del paso actual.
3. Un recuento de cuántos pasos restantes quedan después del paso actual

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

Ahora hagamos el conteo. Contar todos los botones es sencillo:

button {  counter-increment: totalStep;}

A continuación, necesitamos otra cosa para contar que también cuente los botones. Podemos usar un pseudoelemento cuyo único propósito es contar botones:

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

El truco consiste en dejar de contar ese pseudoelemento en todos los elementos después del elemento activo. Si estamos usando una .activeclase que se parece a esta:

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

Estamos contando el remainderallí, lo que también podría ser útil, pero como solo estamos incrementando el resto, eso significa que no estamos contando el currentStepcontador. Fantasía, fantasía.

Luego podemos usar los contadores para generar nuestros mensajes:

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

¡Aquí lo tienes!

Hay un poco de JavaScript allí para que puedas jugar moviendo el estado activo en el botón, pero el conteo y los mensajes son todos CSS.