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.