Numerando con CSS. Secciones de un artículo con HR

Con CSS se pueden hacer muchísimas cosas pero a veces es difícil imaginar la aplicación práctica que cubre precisamente lo que queremos conseguir. En esta entrada veremos una de esas tonterías que de cuando en cuando se me ocurren y que puede servir para ir separando los distintos apartados de una entrada mediante barras de separación horizontal (hr), pero con la peculiaridad de que incorporarán automáticamente un número ordinal.

Para ello echaré mano de uno de los valores que podemos usar en la propiedadcontent y que es el denominadocounter. Este funciona tal y como nos anticipa su traducción, como un contador, y cómo su uso es muy sencillo, aprovecharemos principalmente para verlo con un poco de detalle.

La primera consideración es quecounter sólo puede ser usado como valor de los pseudoelementos:before o:after, por lo que será añadido respectivamente al principio o al final de la caja que lleve el selector principal.

Supondremos que lo que queremos es añadir un ordinal delante de cada elemento de determinada lista (li). Es algo poco eficaz porque con usar listas ordenadas (ol) ya lo tendríamos, pero lo hago sólo para poder ilustrar esto con un ejemplo.

Yo he bautizado el contador con el nombrecontadorlista, pero como con cualquier variable, cada cual le puede llamar como guste.

Los contadores pueden ser diversos así que en un principio necesitamos usar dos propiedades, una para nombrar cada contador y especificar su formato (counter) y otra que indicará en qué selector hay que ir sumando haciendo referencia al nombre del contador. Esta segunda se denominacounter-increment.

Supongamos un HTML como el siguiente:

ul class="listanumerada"
 liContenido uno/li
 liContenido dos/li
 liContenido tres/li
 liContenido cuatro/li
/ul

Para que a esa lista en concreto se le añada automáticamente un número delante de cada elemento, tendríamos que usar algo como esto:

ul.listanumerada li:before {
content: counter(contadorlista);
counter-increment: contadorlista;
}

Ahí lo que estamos indicando es que queremos insertar un contenido que será precisamente un contador llamadocontadorlista y que además, cada vez que "pasemos" por un nuevo elemento de lista, el contador se incremente y así se vayan generando los ordinales (1, 2, 3, 4, etc.) para cada uno de ellos.

Como hemos usado:before, el número se añadirá justo antes del contenido del elemento de lista.

Pero falta un detalle para que todo funcione bien y es que tenemos que poner a cero el contador en alguna parte, realmente en una caja que localizamos por el nombre de su selector.

Esto se logra concounter-reset, que se puede poner en cualquier selector siempre que sea antecesor, pero para que quede el código más junto y comprensible para futuras modificaciones, la puesta a cero la haremos al nivel del contenedor de la lista; en el ejemploul (ul.listanumerada):

ul.listanumerada {
counter-reset: contadorlista;
}

Pues ya lo tenemos todo, así que con el HTML que vimos antes y esas dos reglas CSS que puse después, nos debería salir algo como esto:

Contenido uno
Contenido dos
Contenido tres
Contenido cuatro

De la misma manera podéis numerarspan,div,p, o cualquier otro tipo de elemento con un determinado nombre y lo único que habría que tener en cuenta es lo de usar en el lugar adecuadocounter-reset,counter ycounter-increment.

Hay una cosa más y es que en elcontent se puede añadir texto y ciertos símbolos junto con el contador. De esa manera podremos insertar un espacio en blanco tras el número para evitar lo que nos pasó antes y que no salga tan pegado. También podemos meter en número entre paréntesis o añadir la palabra "Capítulo" con declaraciones como estas:

content: "(" counter(contadorlista) ") ";
...
content: "Capítulo " counter(contardorlista);

Y no sólo podemos poner números. Los estilos para el contador se pueden configurar desdecounter y sus valores coinciden con los que se pueden usar en listas ordenadas. Los más comunes son:

decimal: números decimales comenzando por el 1 (1, 2, 3, 4...)
decimal-leading-zero: idem pero con tantos ceros a la izquierda como sean necesarios para que todos tengan la misma cantidad de caracteres (para listas de entre 100 y 999 elementos sería: 001, 002, 003, 004... 099, 100, 101...)
lower-roman: números romanos en minúsculas (i, ii, iii, iv...)
upper-roman: idem en mayúsculas (I, II, III, IV...)
lower-latin: letras en minúsculas (a, b, c, d...)
upper-latin: idem en mayúsculas (A, B, C, D...)

El valor deseado habría que añadirlo con una coma tras el nombre que le dimos al contador:

content: counter(contadorlista, lower-latin);

Una vez que sabemos todo esto, ya es fácil darle estilo a la etiquetahr de manera que cada vez que añadamos una en una entrada, automáticamente incluya un ordinal como se puede ver en este mismo post (I a VI).

.post-body {
counter-reset: numeros;
}
.post-body hr {
height: 4px;
margin: 40px 0 20px;
border: 0;
text-align: center;
background: #999;
}
.post-body hr:after {
content: "Capítulo " counter(numeros, upper-roman);
counter-increment: numeros;
position: relative;
top: -8px;
padding: 4px 12px;
font-size: 12px;
color: #fff;
background: #999;
border-radius: 0;
}

Tras insertar lo anterior en nuestro CSS, cualquier separación horizontal (hr) que añadamos dentro de una entrada, nos aparecerá con un número generado automáticamente.

Lo suyo sería que probarais variaciones para usarlo con vuestras recetas, novelas, manuales de instrucciones, etc. y para ello, he preparado esteCodePen con algunas pequeñas variaciones sobre este. No olvidéis que igual que aquí lo utilizo conhr, se podría hacer igual con cualquier otra etiqueta o selector.