Muchos tipos de contenido se representan mejor como una lista HTML. En el caso del contenido de listas ordenadas, como los pasos de una receta o las notas al pie de un artículo, el marcador también suele contener información. CSS proporciona varias formas de controlar los contadores en una lista.
Lista de estilos
Existe una amplia variedad de tipos de estilo de lista predefinidos que admiten números, letras del alfabeto, números romanos y muchos sistemas de conteo internacionales.
Además de los estilos compatibles con los navegadores, el W3C publicó Ready-made Counter Styles, con compatibilidad para 181 estilos adicionales en 45 sistemas de escritura.
Si estas opciones no se ajustan a tus necesidades, también puedes definir un @counter-style personalizado. Esto te permite especificar símbolos personalizados, un prefijo y un sufijo, y mucho más.
De forma predeterminada, el marcador de elemento es outside la lista, se posiciona delante de ella y se alinea a la derecha. También puedes colocar el marcador del elemento dentro de la lista con list-style-position: inside.
Contadores
Si bien los estilos de lista controlan cómo se muestran los marcadores de los elementos de la lista, los contadores te permiten controlar los valores que se mostrarán. Para los elementos de lista <li>, el navegador crea un contador llamado list-item que se incrementa en 1 por cada elemento de lista que se encuentra.
Los contadores de CSS mantienen un recuento continuo de la cantidad de veces que se renderiza un elemento que tiene establecido un valor counter-increment correspondiente.
Para crear un contador nuevo, usa counter-reset con un nombre de contador y, de forma opcional, un valor inicial. A menudo, establecerás este valor en un elemento principal que contenga todos los elementos que se contarán.
Luego, agrega una propiedad counter-increment en cada elemento que quieras contar.
Por último, muestra el valor del contador con la función counter().
En este ejemplo, queremos mostrar el recuento acumulado de notas al pie como el texto del vínculo de cada nota al pie. Como queremos un solo contador para todo el documento, establecemos counter-reset: note en el cuerpo y lo incrementamos en cada vínculo de nota al pie.
También puedes tener varios contadores que registren diferentes elementos. En el ejemplo de notas al pie, ¿qué sucedería si quisieras mostrar el índice de la sección y el párrafo en los que se encuentra la nota al pie?
El recuento de secciones se puede crear en el cuerpo con counter-reset y, luego, incrementarse en cada elemento <h2>. Queremos que el recuento de párrafos se restablezca para cada sección, por lo que usaremos counter-reset en los elementos <h2> y lo incrementaremos en los elementos <p>.
Por último, combinamos los valores del contador en la propiedad content.
a:after {
content: "(S" counter(section) "P" counter(paragraph) "N" counter(note) ")";
font-size: small;
vertical-align: super;
}
Contadores anidados
¿Qué sucede cuando anidas una lista dentro de otra? El contador list-item se inicializa para cada elemento <ul> o <ol>, y el uso de counter() solo devuelve la cantidad del recuento más interno. Si quieres mostrar el recuento de cada uno de los contadores anidados, usa la función counters(), que toma un nombre de contador y un separador.
li::marker {
content: counters(list-item, ".")
}
Contadores inversos
De forma predeterminada, los contadores (incluido el contador implícito list-item para los elementos <ol>) comienzan en 0 y aumentan en uno para cada elemento, lo que significa que el primero se contará como 1. ¿Qué sucede si quieres contar hacia atrás hasta 1?
Para ello, agrega el atributo reversed al <ol>. Si usas el estilo de lista estándar, los marcadores funcionarán según lo previsto. Sin embargo, si usas un contador personalizado, deberás establecer counter-increment en un valor negativo y calcular el valor inicial del contador de forma manual.