Tipografía
Utilidades para controlar el estilo del marcador de una lista.
| Clase | Estilos |
|---|---|
list-disc | list-style-type: disc; |
list-decimal | list-style-type: decimal; |
list-none | list-style-type: none; |
list-(<custom-property>) | list-style-type: var(<custom-property>); |
list-[<value>] | list-style-type: <value>; |
Utiliza utilidades como list-disc y list-decimal para controlar el estilo de los marcadores en una lista:
<ul class="list-disc"> <li>Esta es la historia de cómo mi vida cambió por completo</li> <!-- ... --></ul><ol class="list-decimal"> <li>Esta es la historia de cómo mi vida cambió por completo</li> <!-- ... --></ol><ul class="list-none"> <li>Esta es la historia de cómo mi vida cambió por completo</li> <!-- ... --></ul>Usa la sintaxis list-[<value>] para establecer el/la marcador basándose en un valor completamente personalizado:
<ol class="list-[upper-roman] ..."> <!-- ... --></ol>Para variables CSS, también puedes usar la sintaxis list-(<custom-property>) :
<ol class="list-(--my-marker) ..."> <!-- ... --></ol>Esto es solo un atajo para list-[var(<custom-property>)] que añade la función var() por ti automáticamente.
Antepone a la utilidad list-style-type el prefijo de una variante de punto de ruptura como md: para aplicar la utilidad únicamente en tamaños de pantalla mediano y superiores:
<ul class="list-none md:list-disc ..."> <!-- ... --></ul>Obtén más información sobre el uso de variantes en la documentación de variantes.