Tipografía
Utilidades para controlar las imágenes de marcador para elementos de lista.
| Clase | Estilos |
|---|---|
list-image-[<value>] | list-style-image: <value>; |
list-image-(<custom-property>) | list-style-image: var(<custom-property>); |
list-image-none | list-style-image: none; |
Utiliza la sintaxis list-image-[<value>] para controlar la imagen de marcador para elementos de lista:
<ul class="list-image-[url(/img/checkmark.png)]"> <li>5 tazas de champiñones Porcini picados</li> <!-- ... --></ul>Utiliza la sintaxis list-image-(<custom-property>) para controlar la imagen de marcador para elementos de lista usando una variable CSS:
<ul class="list-image-(--my-list-image)"> <!-- ... --></ul>Esto es solo un atajo para list-image-[var(<custom-property>)] que agrega la función var() por ti automáticamente.
Utiliza la utilidad list-image-none para eliminar una imagen de marcador existente de los elementos de lista:
<ul class="list-image-none"> <!-- ... --></ul>Antepone a la utilidad list-style-image 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-image-none md:list-image-[url(/img/checkmark.png)] ..."> <!-- ... --></ul>Obtén más información sobre el uso de variantes en la documentación de variantes.