Avatar byandrev

byandrev

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