::marker

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:

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 Estado Comentario
CSS Pseudo-Elements Level 4
La definición de '::marker' en esta especificación.
Working Draft No significant change.
CSS Lists Module Level 3
La definición de '::marker' en esta especificación.
Working Draft Initial definition.

Compatibilidad con navegadores

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome para AndroidFirefox para AndroidOpera para AndroidSafari en iOSSamsung Internet
::marker
Experimental
Chrome Sin soporte NoEdge Sin soporte NoFirefox Soporte completo 68IE Sin soporte NoOpera Sin soporte NoSafari Sin soporte NoWebView Android Sin soporte NoChrome Android Sin soporte NoFirefox Android Soporte completo 68Opera Android Sin soporte NoSafari iOS Sin soporte NoSamsung Internet Android Sin soporte No

Leyenda

Soporte completo  
Soporte completo
Sin soporte  
Sin soporte
Experimental. Esperar que el comportamiento cambie en el futuro.
Experimental. Esperar que el comportamiento cambie en el futuro.

Véase también