::marker
Disponibilidad limitada
Esta característica no es Baseline porque no funciona en algunos de los navegadores más usados.
¿Quieres que más navegadores sean compatibles con esta característica? Cuéntanos por qué.
Experimental: Esta es una tecnología experimental
Comprueba la Tabla de compabilidad de navegadores cuidadosamente antes de usarla en producción.
El pseudo-elemento ::marker en CSS selecciona la caja de marcadores de un elemento de la lista, que normalmente contiene una viñeta o un número. Funciona en cualquier elemento o pseudo-elemento configurado para display: list-item, como el elemento <li> y <summary>.
::marker {
color: blue;
font-size: 1.2em;
}
Propiedades permitidas
Sólo ciertas propiedades CSS puedes utilizarse en una regla con ::marker como selector:
- Todas las propiedades de fuentes
color- La propiedad
text-combine-upright,unicode-bidiydirection - La propiedad
content
Nota: En la especificación se indica que en el futuro de pueden admitir propiedades CSS adicionales.
Sintaxis
::marker {
/* ... */
}
Ejemplo
HTML
<ul>
<li>Duraznos</li>
<li>Manzanas</li>
<li>Ciruelas</li>
</ul>
CSS
ul li::marker {
color: red;
font-size: 1.5em;
}
Resultado
Especificaciones
| Especificación |
|---|
| CSS Pseudo-Elements Module Level 4 # marker-pseudo |