:: marcador - Trucos CSS

Anonim

El ::marker pseudoelemento sirve para aplicar estilo al marcador estilístico de un elemento de lista. Por ejemplo, la viñeta de un valor predeterminado

    (por ejemplo, •) o el número de un valor predeterminado
      (por ejemplo, 1.). Esto hace que sea extremadamente fácil hacer cosas simples como colorearlas.

      Como un pseudo-elemento, podrá seleccionar ::markeren DevTools para inspeccionar, pero no está realmente "en el DOM" como un elemento normal.

      Chrome DevTools seleccionando el ::markerpseudoelemento y mostrando los estilos.

      Puede combinar ::markercon la contentpropiedad para cambiar lo que es el marcador. Por ejemplo, reemplazando las viñetas de la lista con emoji:

      Si cambia la display propiedad a list-itemen cualquier elemento, puede controlar su ::marker. Aquí

      los elementos están numerados, lo que combina la idea de contadores CSS:

      Los marcadores siguen siendo marcadores de lista, por lo que están sujetos a cosas como list-style-position.

      Relacionado

      Artículo el 5 de mayo de 2020

      Recetas de estilo de lista

      Chris Coyier

      Más información

      • Especificaciones

      Soporte del navegador

      Estos datos de soporte del navegador son de Caniuse, que tiene más detalles. Un número indica que el navegador admite la función en esa versión en adelante.

      Escritorio

      Cromo Firefox ES DECIR Borde Safari
      86 68 No 86 11,1

      Móvil / Tablet

      Android Chrome Android Firefox Androide Safari de iOS
      88 85 81 11.3-11.4