CSS / list-style-image: imágenes, tamaño y marcadores alternativos

CSS

Creado 2026-11-03 Última modificación 2026-11-03

CSS list-style-image especifica una imagen para el marcador de un elemento de lista. Comúnmente se establece en ul o ol y es heredado por sus elementos li. Si no hay una imagen utilizable disponible, se usa el marcador list-style-type, así que defina también una alternativa adecuada.

Función y valores de list-style-image

El valor inicial es none, y la propiedad se hereda. Los marcadores pertenecen a elementos con display: list-item, como los elementos li ordinarios. Establecerlo en ul generalmente funciona porque los elementos de la lista heredan el valor; esta propiedad no agrega una imagen de fondo al ul en sí.

Valor	Significado
`none`	No usar marcador de imagen. Esto no necesariamente elimina el marcador en sí.
`url("marker.svg")`	Usar el recurso de imagen especificado como marcador.
`initial`	Restaurar esta propiedad a su valor inicial, none.
`inherit`	Usar el valor calculado del padre.
`unset`	Se comporta como inherit porque esta propiedad se hereda.

En la sintaxis, url() es una función que contiene una URL, no la palabra simple url. El tipo de animación es discreto, lo que no significa que dos imágenes se transformen suavemente una en otra. MDN referencia list-style-image

Un ejemplo completo para copiar

Guarde el código completo a continuación como list-marker.html en UTF-8 y ábralo en un navegador. No se necesita ninguna biblioteca, servidor o archivo de imagen separado. SVG, Gráficos Vectoriales Escalables, es un formato de imagen vectorial; este ejemplo incrusta un círculo azul de 16×16 en una URL de datos. Las palabras en inglés son elementos de comparación.

<!doctype html>
<html lang="es">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Comparar marcadores de imagen</title>
  <style>
    body { max-width: 42rem; margin: 0 auto; padding: 1rem; font-family: sans-serif; }
    h2 { font-size: 1.1rem; }
    .image-list {
      list-style-type: square;
      list-style-position: outside;
      list-style-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='6' fill='%230066cc'/%3E%3C/svg%3E");
      font-size: 20px;
      max-width: 22rem;
      padding-inline-start: 2rem;
    }
    .image-list li { margin-block: .5rem; }
    .large { font-size: 32px; }
    .reset { list-style-image: none; }
  </style>
</head>
<body>
  <h1>Comparar marcadores de imagen</h1>
  <h2>list-style-image</h2>
  <ul class="image-list"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
  <h2>font-size: 32px</h2>
  <ul class="image-list large"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
  <h2>list-style-image: none</h2>
  <ul class="image-list reset"><li>Alpha</li><li>Beta Gamma Delta Epsilon Zeta Eta Theta Iota Kappa</li></ul>
</body>
</html>

El resultado esperado es un marcador de círculo azul en las dos primeras listas y marcadores cuadrados en la tercera. Solo el texto crece a 32px en la segunda lista. Cuando el segundo elemento largo se ajuste, compare la alineación de un marcador externo con su texto. Después de editar el archivo, guarde y recargue.

Separar el tamaño de imagen y el de fuente

Este SVG especifica explícitamente ancho y alto como 16, dando al marcador de imagen dimensiones de 16×16 píxeles CSS. Aumentar el texto de 20px a 32px no agranda automáticamente esta imagen en proporción. También es inexacto decir que cada imagen de marcador siempre usa sus dimensiones de píxeles originales: el tamaño puede diferir cuando una imagen no tiene dimensiones intrínsecas o relación de aspecto.

list-style-image no tiene un parámetro separado de ancho o alto para el marcador. Prepare un pequeño recurso de marcador o dé al SVG dimensiones apropiadas. Las propiedades compatibles con ::marker también son limitadas; establecer ancho y alto allí no proporciona un dimensionamiento arbitrario de la imagen. Para un tamaño y espaciado precisos, considere un diseño separado de imagen de fondo o pseudo-elemento mientras preserva la semántica de lista y la información de texto real. MDN: propiedades admitidas por ::marker

Quitar imágenes y revisar la notación abreviada

Para eliminar solo la imagen, configure list-style-image: none como se indica a continuación. El ejemplo conserva list-style-type: square, por lo que aparecen los marcadores cuadrados. Compare el cambio y restaure la declaración original de url() para que la imagen vuelva a aparecer. El marcador de reserva también se usa cuando la carga de la imagen falla y no hay una imagen utilizable disponible.

.image-list {
  list-style-image: none;
}

La siguiente notación abreviada list-style también restablece el componente de imagen omitido. Por lo tanto, aplicarlo más tarde puede eliminar una imagen declarada anteriormente. Verifique si hay una sobrescritura posterior mediante notación abreviada y use propiedades individuales o incluya la imagen en la notación abreviada según su intención.

.image-list {
  list-style: square outside;
}

Comprobar los marcadores que no aparecen

Verifique la URL de la imagen y la respuesta. Una URL relativa en una hoja de estilo externa se resuelve en relación con ese archivo CSS, no con el archivo HTML. Una URL en un elemento style sigue la URL base del documento. Use el panel de Red en las herramientas de desarrollo para verificar respuestas 404 y formatos de imagen no válidos.
Inspeccione el elemento li seleccionado y sus valores calculados de list-style-image y display. Revise si existe una declaración abreviada de list-style o una regla de mayor prioridad que sobrescriba el valor. También verifique si display ha cambiado a algo como flex, de modo que el elemento ya no genere un marcador de lista.
Con el posicionamiento externo, una sangría insuficiente o la configuración overflow de un elemento padre pueden recortar el marcador. Verifique el padding de la lista y el recorte. Si una política del sitio bloquea las URLs de datos, reemplace la imagen de ejemplo con una URL de imagen permitida.

Las listas anidadas también pueden heredar esta propiedad. Para eliminar imágenes de una lista anidada, aplique explícitamente list-style-image: none a esa lista y establezca su list-style-type al valor deseado.

Mantener el significado y la accesibilidad de la lista

El círculo azul aquí es decorativo. Coloque significados importantes como completado, advertencias o calificaciones en el texto real del elemento de la lista, en lugar de solo en una imagen CSS. Los marcadores CSS no proporcionan un atributo alt al estilo de img de HTML, así que no omita información suponiendo que la imagen se cargará o se anunciará.

Dar a un ol el mismo marcador de imagen reemplaza sus números visibles con imágenes. Mantenga los números nativos cuando los lectores necesiten numeración de pasos. Preserve la estructura ul, ol y li, y verifique que los elementos y su secuencia sigan siendo comprensibles sin imágenes. Definición de marcadores de imagen del W3C

CSS