Blog

ES

Cambiar el color de las viñetas de una lista en CSS

2 min de lectura

Al intentar estilizar las viñetas (•) o los números de una lista (1.) con un color diferente al del texto, es común encontrarse con que el estilo aplicado al texto no afecta a las viñetas. Esto sucede al usar etiquetas <ul> o <ol> en HTML, donde aplicar color directamente solo cambia el texto, pero no los marcadores de la lista.

Pseudo elemento ::marker

CSS tiene un pseudoelemento llamado ::marker que permite acceder directamente al marcador de los elementos de una lista. Es decir, a las viñetas en <ul> o a los números en <ol>.

Ejemplo de código

ul li::marker,
ol li::marker {
  color: #aaa;
}

Este bloque de CSS aplica un nuevo color a los markers de listas.

Soporte en los navegadores

::marker está bien soportado en navegadores modernos: Chrome, Edge, Firefox, Safari y Opera. En navegadores antiguos como Internet Explorer no funcionará. Pero si estás desarrollando algo moderno no hay problema. Aqui puedes ver el soporte mas a detalle en caniuse.

Pequeños detalles como estos pueden marcar la diferencia en la estética y coherencia en la interfaz. Con ::marker, ahora se tiene el control total sobre cómo se ven tus listas.

Comparte este artículo en

Avatar byandrev

Andres Parra

Software Engineer

Soy Andrés Parra, Ingeniero de Software apasionado por crear soluciones tecnológicas escalables e innovadoras. Me especializo en la construcción de aplicaciones web modernas, dominando un stack versátil que incluye JavaScript, TypeScript, Python y Java, junto con frameworks como React, Next.js y Spring Boot. Interesado en las últimas tecnologías y herramientas de desarrollo.