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.

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.

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.

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.

1 Reset y espaciado controlado 2 Bullets modernos con ::marker 3 Numeración continua con counters 4 Listas como layout moderno

🧪 Aprende probando

Ejemplo Bullets con color Un bullet destacado sin perder semántica.

⌄

Ejemplo Pasos numerados Numeración custom sin depender del HTML.

⌄

Ejemplo Lista de tags Transforma una lista en un conjunto de etiquetas.

⌄

🏁 Retos

Reto Reto: numeración con counter Configura un contador para mostrar números en el marcador.

⌄

🧰 Recursos

Enlaces útiles

Lección HTML: listas y semántica MDN list-style MDN ::marker W3Schools CSS Lists

Test

Comprueba tus conocimientos con un test sobre CSS.

Test de CSS

Recursos del curso 78

📘 Glosario 🎧 Audios 📄 PDFs 🖼️ Infografías 🎬 Vídeos 🔗 Enlaces 🧠 Flashcards 🧩 Snippets

‹

Lección 10

Sizing intrínseco: min-content, max-content, fit-content y auto

Lección 12

Tablas en CSS: legibles, compactas y responsive

›