Formas Creativas de Estilizar Listas con CSS

Las listas predeterminadas del navegador rara vez coinciden con un diseño real. Ya sea que estés construyendo un menú de navegación, un tutorial paso a paso o una lista de características de producto, el estilizado de listas con CSS te brinda las herramientas para hacer que se vean intencionales. Este artículo cubre las técnicas más prácticas basadas en estándares—desde propiedades nativas de listas hasta contadores CSS y marcadores personalizados—sin sacrificar la accesibilidad.

Comienza con el Tipo de Lista HTML Correcto

Antes de tocar CSS, elige el elemento correcto:

• <ul> — listas desordenadas donde la secuencia no importa (menús de navegación, listas de características)
• <ol> — listas ordenadas donde la secuencia es significativa (instrucciones, clasificaciones)
• <dl> — listas de descripción que emparejan términos con definiciones (glosarios, metadatos)

El HTML semántico importa aquí. Los lectores de pantalla anuncian el tipo de lista y el conteo de elementos, lo que ayuda a los usuarios a comprender el contexto antes de leer un solo elemento.

Las Propiedades list-style-*: Tu Punto de Partida

La abreviatura list-style agrupa tres propiedades:

ul {
  list-style: square inside none;
  /* list-style-type | list-style-position | list-style-image */
}

list-style-position vale la pena entenderla claramente:

• outside (predeterminado) — el marcador se sitúa en el margen, y el texto permanece perfectamente alineado
• inside — el marcador fluye con el texto, causando ajuste de línea en elementos multilínea

list-style-image existe pero es limitada—no puedes redimensionar o reposicionar la imagen. Para viñetas de imagen personalizadas, un pseudo-elemento ::before con background-image te da mucho más control.

Estilizar Marcadores Nativos con CSS ::marker

El pseudo-elemento ::marker te permite estilizar la viñeta o número incorporado directamente—sin marcado adicional requerido:

li::marker {
  color: deeppink;
  font-size: 1.2em;
  font-weight: bold;
}

Limitación importante: ::marker solo admite un subconjunto específico de propiedades CSS: color, content, font-*, direction, unicode-bidi, white-space, text-combine-upright, y propiedades de animación/transición. No puedes aplicar display, background, padding, margin, o posicionamiento. Trátalo como un gancho de estilizado a nivel de texto, no como un elemento completo.

El soporte del navegador para ::marker es bueno en navegadores actuales, pero verifica tu matriz de navegadores objetivo. Usualmente es la opción más limpia para cambios simples de color o fuente en marcadores nativos.

Viñetas de Lista Personalizadas con ::before

Cuando ::marker no es suficiente—para viñetas estilo icono, alineación compleja o transiciones—usa ::before en su lugar:

ul {
  list-style: none;
  padding-left: 0;
}

ul li {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}

ul li::before {
  content: "✓";
  color: green;
  flex-shrink: 0;
}

Nota de accesibilidad: Establecer list-style: none puede causar que Safari/VoiceOver deje de exponer el elemento como una lista. Si la semántica de lista es significativa, agrega role="list" al <ul> o <ol>.

Contadores CSS para Listas Ordenadas Estilizadas

Los contadores CSS te dan control total sobre el formato de listas numeradas—útil para listas ordenadas estilizadas con prefijos, sufijos o numeración multinivel personalizados:

ol {
  list-style: none;
  counter-reset: steps;
}

ol li {
  counter-increment: steps;
}

ol li::before {
  content: "Paso " counter(steps) ". ";
  font-weight: bold;
  color: #333;
}

Contadores Anidados

Para listas anidadas, counters() (plural) genera la jerarquía completa:

ol {
  list-style: none;
  counter-reset: steps;
}

ol li {
  counter-increment: steps;
}

ol li::before {
  content: counters(steps, ".") " ";
}
/* Genera: 1, 1.1, 1.2, 2, 2.1 */

La propiedad counter-increment también acepta un tamaño de paso: counter-increment: steps 2 incrementa de dos en dos cada vez.

Una Nota sobre @counter-style

La regla-at @counter-style te permite definir sistemas de conteo completamente personalizados—símbolos personalizados, alfabetos o patrones cíclicos:

@counter-style thumbs {
  system: cyclic;
  symbols: "👍" "👎";
  suffix: " ";
}

ul {
  list-style-type: thumbs;
}

Usa con precaución. El soporte del navegador para @counter-style permanece incompleto—notablemente, Safari agregó soporte solo en la versión 17. Siempre prueba en tus navegadores objetivo y define un respaldo de list-style-type en el mismo elemento para asegurar una degradación elegante.

Elegir el Enfoque Correcto

Conclusión

Un buen estilizado de listas CSS comienza con HTML semántico y añade mejoras visuales encima. Usa ::marker para cambios ligeros de color y fuente, ::before cuando necesites control de diseño, y contadores CSS cuando las listas ordenadas necesiten numeración personalizada. Evita eliminar la semántica de lista sin restaurarla vía ARIA. Cada técnica tiene un caso de uso claro—elige la que se ajuste a tu diseño sin complicarlo demasiado.

Preguntas Frecuentes

Truly understand users experience

See every user interaction, feel every frustration and track all hesitations with OpenReplay — the open-source digital experience platform. It can be self-hosted in minutes, giving you complete control over your customer data. . Check our GitHub repo and join the thousands of developers in our community..