Como desarrolladores web, representar la información de forma adecuada es muy importante. Una forma de mostrar correctamente la información es denotar la jerarquía, respondiendo a la pregunta de "¿quién va primero?".
Una forma segura de denotar la jerarquía es numerar objetos. Aparte de la lista ordenada, no hay otro elemento que nos permita incrementar el orden en CSS. Si queremos mostrar números como los que puedes ver en la imagen de arriba, tenemos que ayudarnos de los preprocesadores. Mantener un seguimiento del índex, asegurándonos de auto-incrementarlo, etc. Algo tal que así.
<ul class="numbered-list">
<?php for ($i = 1; $i <= $posts->total_count; $i++): ?>
<li class="numbered-list__item">
<span class="numbered-list__counter">
<?php echo $i ?>
</span>
<!-- Remaining markup -->
</li>
<?php endfor ?>
</ul>
Esto es bueno hasta cierto punto, ya que tiene sus limitaciones. ¿Qué pasa si queremos usar letras, números romanos, caracteres griegos, etc? La implementación de cualquiera de estos ejemplos requiere el uso de librerías personalizadas.
Por suerte, con CSS3 podemos ocuparnos de cosas como estas sin tener que extrujarnos el coco.
counter-reset y counter-increment
Antes de empezar a contar con CSS, debes saber que los contadores constan de dos cosas: reset e increment. Reset sirve para resetear nuestro contador o darle a nuestro contador un punto de partida, mientras que increment incrementa el contador. Para entender mejor esto, vamos a verlo en un diseño funcional.
Todo lo que necesitamos es diseño básico, pero simple de entender. En nuestro archivo css, necesitamos definir nuestros resets y nuestros increments.
<ul class="numbered-list">
<li class="numbered-list__item">
<span class="numbered-list__counter"></span>
<span class="numbered-list__text">Minion ipsum</span>
</li>
</ul>
Vamos a definir <li class = "numbered-list"> </ li> como punto de reset. Para hacer eso, simplemente hacemos.
.numbered-list {
counter-reset: counter-name;
}
Ojo, el counter-name puede ser cualquier cosa que quieras. Dado que hemos definido nuestro punto de reset, necesitamos indicar que queremos incrementar el valor de <span class = "numbered-list__counter"> </ span>. Para hacer eso, usamos.
.numbered-list__counter {
counter-increment: counter-name;
}
Referenciando el punto de reset anterior, le indicamos al contador a través de increment-counter que empiece a contar. En este caso, nuestro ejemplo no funcionará aún.
Pero ya que los incrementos del contador se generan con :before y :after, necesitamos insertar contadores usando la propiedad content, ya sea con :after o :before. Además, la función de css counter nos proporciona el valor del contador en el punto perfecto.
.numbered-list__counter:before {
counter-increment: counter-name;
content: counter(counter-name);
}
El counter-increment puede coger un valor positivo o negativo para cambiar el número de pasos utilizados para aumentar el valor.
counter-increment: counter-name 2; /* counter-increment: counter-name +2; */
Esto aumentará el incremento con un múltiplo de 2. Para invertir el incremento, puede usarse un valor negativo para disminuir el valor por un múltiplo del índice proporcionado.
counter-increment: counter-name -2;
Cambiando el punto de comienzo de los contadores
Pasar un entero después de la declaración del counter-reset indica al navegador que tiene que compensar el valor inicial.
.numbered-list {
counter-reset: counter-name 2;
}
Al establecer este valor en 2 se inicia el contador en 3. También debes saber que el valor por defecto del reset del contador es 0.
Invirtiendo contadores
Invertir contadores implica usar un índice negativo en el counter-increment. Pero esto también puede ser complicarse, porque si la lista se genera dinámicamente, el usuario tiene que encontrar una forma de mantener el registro del índice.
Personalmente, he visto a gente hacer algo como esto.
<ul class="numbered-list" style="counter-reset: name {{{PHP1}}};">
<?php for ($i = 1; $i <= $posts->total_count; $i++): ?>
<li class="numbered-list__item">
<span class="numbered-list__counter">
<?php echo $i ?>
</span>
<!-- Remaining markup -->
</li>
<?php endfor ?>
</ul>
El contador se resetea inline usando php para generar el valor del counter-reset. En el archivo css, podemos configurar el counter-increment con un valor negativo.
Usando otros formatos
Aparte de incrementar el contador numéricamente, podemos incrementarlos utilizando letras, caracteres griegos, números romanos...
Si eres fan de los números romanos, solo tienes que pasarle un segundo parámetro (lower-roman) a la función counter de css.
content: content(counter-name, lower-roman);
Como opciones tienes: decimal, decimal-leading-zero, lower-roman, upper-roman, lower-greek, lower-latin, upper-latin, armenian, georgian, lower-alpha, upper-alpha.
Fuente: Samuel Oloruntoba