- Control total sobre la creación y gestión de contadores personalizados mediante counter-reset y counter-increment.
- Capacidad de generar numeraciones complejas, anidadas y con diversos formatos como números romanos o letras.
- Implementación flexible mediante pseudo-elementos para evitar la dependencia de JavaScript en la numeración de elementos.
¿Alguna vez te has encontrado en el apuro de querer numerar una lista de elementos o los encabezados de un artículo y te has dado cuenta de que las etiquetas estándar no son suficientes? A menudo, los desarrolladores recurrimos a JavaScript o a preprocesadores para llevar la cuenta de los índices, pero la realidad es que CSS tiene un sistema de variables interno capaz de gestionar estas tareas de forma nativa y mucho más limpia.
Manejar los contadores de CSS es, básicamente, como tener un pequeño bucle for directamente en tus hojas de estilo. Esta funcionalidad es una joya oculta que permite denotar la jerarquía de la información sin ensuciar el HTML con números escritos a mano, lo que facilita enormemente el mantenimiento del código y la adaptabilidad del diseño.
Fundamentos de los contadores en CSS
Para que la magia ocurra, necesitamos coordinar cuatro herramientas principales. Primero tenemos counter-reset, que es el encargado de crear el contador o reiniciarlo a un valor concreto. Si no le pasamos ningún número, el valor por defecto será 0. Por otro lado, counter-increment es el motor que hace que el número suba o baje cada vez que el navegador encuentra el elemento seleccionado.
Para visualizar estos números, no podemos simplemente escribir el nombre del contador; necesitamos usar la propiedad content dentro de pseudo-elementos como ::before o ::after. Finalmente, la función counter() es la que extrae el valor actual y lo plasma en la pantalla. Es un flujo lógico: reseteas, incrementas y luego muestras.
Sintaxis y valores de counter-increment
La propiedad counter-increment acepta una lista de valores separados por espacios. Podemos indicar el nombre del contador que queremos modificar y, opcionalmente, un número entero que defina cuánto queremos sumar. Si omitimos este número, CSS asumirá que queremos aumentar el valor en 1.
- Identificador personalizado: Es el nombre que le das a tu contador (por ejemplo,
seccion-numerador). - Valor entero: Permite saltos personalizados. Si ponemos
counter-increment: contador 2;, el número subirá de dos en dos. - Valores negativos: Si añadimos un signo menos, como en
-1, el contador empezará a restar, permitiéndonos crear secuencias numéricas descendentes. - Keyword none: Sirve para anular cualquier incremento previo en reglas más específicas, devolviendo el contador a su estado estático.
Casos de uso prácticos y reales
Uno de los ejemplos más útiles es la numeración de líneas de código. Cuando usamos librerías de resaltado de sintaxis que no incluyen numeración, podemos inyectar un atributo de datos en el HTML y usar CSS para crear una columna de números alineada a la izquierda, usando counter-reset en el contenedor del código y counter-increment en cada línea.
Otro escenario muy común es la organización de títulos en un documento largo. En lugar de escribir \»Sección 1\», \»Sección 2\», etc., podemos configurar el cuerpo de la página para que resetee un contador y hacer que cada etiqueta h2 incremente dicho valor. Incluso podemos añadir texto personalizado concatenando cadenas, como content: counter(titulo) \": \";, para que el resultado sea mucho más elegante.
Formatos avanzados y numeración anidada
No todo tiene que ser decimal. CSS nos permite cambiar la apariencia de los números pasando un segundo argumento a la función counter(). Podemos optar por números romanos (upper-roman o lower-roman), letras latinas, caracteres griegos o incluso formatos con ceros a la izquierda (decimal-leading-zero), lo que nos da una versatilidad increíble sin tocar una sola línea de JS.
Cuando tenemos estructuras complejas donde hay secciones dentro de otras secciones, la función counters() (en plural) es la solución. Esta función permite conectar los valores de los ancestros, creando ese efecto de índice jerárquico donde vemos numeraciones como \»1.1\», \»1.2.1\», etc. Para lograrlo, basta con definir un separador, como un punto, que unirá los niveles de anidamiento automáticamente.
Trucos para el control del punto de inicio
A veces no queremos empezar desde el 1. Para solucionar esto, podemos pasar un valor entero a counter-reset. Es importante notar que el navegador compensa el valor inicial; por ejemplo, si establecemos counter-reset: nombre 2;, el primer incremento hará que el contador muestre el número 3. Esto es ideal para cuando tenemos elementos introductorios que no deben ser numerados pero queremos que la lista oficial comience en un punto específico.
Dominar estas propiedades permite crear interfaces mucho más profesionales y organizadas, delegando la lógica de la numeración al navegador y manteniendo la estructura del documento limpia. Al combinar el reseteo estratégico, el incremento flexible y la potencia de los pseudo-elementos, conseguimos un sistema de indexación automática que se adapta a cualquier cambio de contenido sin necesidad de actualizar manualmente los números.
