CSS

Listas en CSS: bullets, numeración y estilos modernos

Personaliza listas sin perder semántica: bullets claros, numeración continua y layouts modernos.

¿Cuánto sabes de CSS?

📘 Teoría

Reset y espaciado controlado

Empieza eliminando estilos del navegador para definir tu propio ritmo.

Las listas vienen con margen y padding por defecto. Si no los controlas, el layout se ve desalineado.

Usa padding-inline-start para definir la sangría y list-style-position para elegir dónde cae el bullet.

Si hay títulos o iconos, alinea la lista con el resto del contenido usando el mismo ritmo vertical.

Elimina margin-top/bottom para evitar saltos entre secciones.
Define padding-inline-start en rem para que escale con la tipografía.
Prueba list-style-position: inside cuando hay líneas largas.

Reset base

ul, ol {
  margin: 0;
  padding-inline-start: 1.25rem;
  list-style-position: outside;
}

Bullets modernos con ::marker

::marker permite estilizar el bullet sin hacks.

Con ::marker puedes cambiar color, peso y contenido del bullet manteniendo la semántica.

Si necesitas iconos complejos, combina list-style: none con ::before.

Evita imágenes pesadas: los bullets simples escalan mejor en UI modernas.

Usa ::marker para color y peso sin romper el layout.
list-style: none elimina bullets cuando diseñas una lista de tarjetas.
No uses imágenes grandes: afecta legibilidad y rendimiento.

Marker personalizado

.features li::marker {
  color: #0ea5e9;
  font-weight: 700;
}

Numeración continua con counters

Ideal cuando separas pasos en bloques pero quieres numeración seguida.

Los counters te dejan controlar la numeración sin depender del HTML.

Define el contador en el contenedor y aumenta en cada li.

Si necesitas continuar en otra lista, puedes reiniciar el contador con un valor inicial.

Contador básico

.steps {
  counter-reset: step;
}

.steps li {
  counter-increment: step;
}

.steps li::marker {
  content: counter(step) \". \";
  font-weight: 700;
}

Listas como layout moderno

Una lista puede ser un menú, tags o una grilla ligera.

Con flex o grid puedes convertir una lista en una fila de etiquetas o cards.

Elimina bullets, define gap y controla el wrapping para responsividad.

Mantienes la semántica de lista pero con apariencia de UI moderna.

Lista de tags

.tags {
  list-style: none;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tags li {
  padding: 4px 10px;
  border-radius: 999px;
  background: #e2e8f0;
}