Para ello echaré mano de uno de los valores que podemos usar en la propiedad content y que es el denominado counter. 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 que counter 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 nombre contadorlista, 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 denomina counter-increment.
Supongamos un HTML como el siguiente:
<ul class="listanumerada"> <li>Contenido uno</li> <li>Contenido dos</li> <li>Contenido tres</li> <li>Contenido 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;
}
content: counter(contadorlista);
counter-increment: contadorlista;
}
Ahí lo que estamos indicando es que queremos insertar un contenido que será precisamente un contador llamado contadorlista 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 con counter-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 ejemplo ul (ul.listanumerada):
ul.listanumerada {
counter-reset: contadorlista;
}
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 numerar span, 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 adecuado counter-reset, counter y counter-increment.
Hay una cosa más y es que en el content 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);
...
content: "Capítulo " counter(contardorlista);
Y no sólo podemos poner números. Los estilos para el contador se pueden configurar desde counter 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 etiqueta hr 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;
}
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 este CodePen con algunas pequeñas variaciones sobre este. No olvidéis que igual que aquí lo utilizo con hr, se podría hacer igual con cualquier otra etiqueta o selector.
¿Vemos otro post al azar por si le encuentras utilidad o quizás prefieres ser más metódico y suscribirte a nuestras entradas por correo? También puedes imprimir este artículo y por supuesto compartirlo en redes sociales si fue de tu agrado.
Y muchos más artículos interesantes si nos sigues en...
Hola Joralgom. Eso es por la "autopaginación" que hace algún tiempo instauró Blogger. Cuando una página tiene, a su juicio, demasiado peso, reduce el número de entradas a su discreción. La solución rápida es usar el corte <!-- more --> en todas tus entradas. Prueba a añadirlo en las más recientemente publicadas y así compruebas que la cosa sale como quieres.
ResponderEliminar