Lo más probable es que, si desea numerar las cosas en orden en un sitio web, la lista ordenada (<ol>) es tu chico. También es bastante razonable que quieras diseñar esos números. Curiosamente, diseñar esos números de lista no es algo muy fácil en CSS. Afortunadamente, tampoco es imposible. Roger Johansson tiene un tutorial que muestra cómo se puede hacer con el :before pseudo elemento, que puede tener un counter como un valor para el content propiedad.
Pero que se sepa, la aplicación de contadores numerados no se limita a listas ordenadas. Por ejemplo, digamos que desea numerar los pares de preguntas y respuestas de una lista de preguntas frecuentes.
Tendrías un marcado como este:
<dl class="faq">
<dt>How much wood would a wood chuck chuck if a wood chuck could chuck wood?</dt>
<dd>1,000,000</dd>
<dt>What is the air-speed velocity of an unladen swallow?</dt>
<dd>What do you mean? An African or European swallow?</dd>
<dt>Why did the chicken cross the road?</dt>
<dd>To get to the other side</dd>
</dl>Cada nuevo <dt> elemento es una nueva pregunta, por lo tanto, dónde deberíamos aplicar la numeración. Es tan simple como esto:
.faq {
counter-reset: my-badass-counter;
}
.faq dt:before {
content: counter(my-badass-counter);
counter-increment: my-badass-counter;
}Estilo el :before elemento como quieras. Por ejemplo:
Ver demostración
Solo quería que se dieran cuenta de esta habilidad. Empiezas a pensar en todo tipo de cosas para numerar una vez que lo entiendes. Por ejemplo, recientemente publiqué en un blog una de mis recetas favoritas y numeré cada paso / foto con números romanos en bloque.
Lo que me recuerda: los números no tienen por qué ser decimales. Pueden ser cualquier cosa que list-style-type puede ser. A saber:
Dto (• • •)
círculo (○ ○ ○)
cuadrado (▪ ▪ ▪)
decimal (1 2 3)
cero inicial decimal (01, 02, 03)
inferior-romano (i ii iii)
alto-romano (I II III)
griego inferior (α β γ)
latín inferior (abc)
latín alto (ABC)
armenio
georgiano
alfa inferior (abc)
alfa superior (ABC)
Todo lo que necesita hacer es especificar cuál en el valor del contador:
content: counter(my-counter, lower-roman);El futuro
Lo anterior es genial y está en el campo Use-It-Today ™. Pero casi se siente hack cuando miras el salto adelante que están dando las listas CSS3. Una vez que aparezca el soporte del navegador para eso, podremos hacer cosas como apuntar al marcador de la lista a voluntad:
/*
Examples from THE FUTURE
No browser support at the time of this writing
*/
li::marker {
width: 30px;
text-align: right;
margin-right: 10px;
display: inline-block;
}
ol {
list-style: symbols("*" "2020" "2021" "A7");
}
ul {
list-style-type: "★";
}