list-style-image

Ejemplos

Ejemplo básico

Usa la sintaxis list-image-[<value>] para controlar la imagen del marcador para los elementos de la lista:

<ul class="list-image-[url(/img/checkmark.png)]">
  <li>5 cups chopped Porcini mushrooms</li>
  <!-- ... -->
</ul>

Usando una variable CSS

Usa la sintaxis list-image-{(<custom-property>)} para controlar la imagen del marcador para los elementos de la 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() automáticamente por ti.

Eliminando una imagen de marcador

Usa la utilidad list-image-none para eliminar una imagen de marcador existente de los elementos de la lista:

<ul class="list-image-none">
  <!-- ... -->
</ul>

Responsive design

Prefija una utilidad list-style-image con una variante de breakpoint como md: para aplicar la utilidad solo en tamaños de pantalla medium y superiores:

<div class="list-image-none md:list-image-[url(/img/checkmark.png)] ...">
  <!-- ... -->
</div>

Aprende más sobre el uso de variantes en la documentación de variantes.