Contador de reinicio - Trucos CSS

La counter-resetpropiedad permite la numeración automática de elementos. Como una lista ordenada (

article ( counter-reset: section; ) section ( counter-increment: section; ) section h2:before ( content: counter(section) '. '; )

La counter-resetpropiedad se utiliza para restablecer un contador CSS a un valor dado.

Es parte del módulo contador CSS que es parte del contenido generado, numeración automática y enumera la especificación CSS2.1, ampliada en la especificación CSS3 del módulo de contenido generado y reemplazado.

Sintaxis

counter-reset: ( ?)+ | none

Dónde…

es el nombre del contador que desea restablecer
es el valor para restablecer el contador a
none deshabilitar el contador

body ( counter-reset: my-awesome-counter 0; )

Nota: el valor predeterminado para el número entero es 0. Si no se establece ningún número entero después del nombre del contador, se restablecerá a 0. Por lo tanto, esto funciona como se esperaba:

body ( counter-reset: my-awesome-counter; )

Puede restablecer varios contadores a la vez con una lista separada por espacios, cada uno con su valor específico si lo desea.

body ( counter-reset: my-awesome-counter 5 my-other-counter; )

Esto se restablecerá my-awesome-countera 5 y my-other-counteral valor predeterminado: 0.

Se puede ver esta lista como: counter1 value1 counter2 value2 counter3 value3… . Si se omite un valor, es 0.

Manifestación

En la siguiente demostración, articlerestablece el sectioncontador a su valor predeterminado (0), que luego se incrementa en cada ocurrencia de sección, luego se muestra delante de los títulos de sección.