Pseudo-elemento ::marker de CSS

Definición y uso

CSS ::marker Los pseudo-elementos se utilizan para establecer el estilo de las marcas de los elementos de lista.

Este pseudo-elemento es aplicable a cualquier elemento configurado con display: lista-item.

Nota:Las siguientes propiedades pueden usarse con ::marker Uso conjunto:

• Todas las propiedades de fuente
• Todas las propiedades de animación
• Todas las propiedades de transición
• color
• espacio-blanco
• contenido
• text-combine-upright
• unicode-bidi
• dirección

Ejemplo

Ejemplo 1

Configura el color y el tamaño de fuente para todas las marcas de lista:

::marker {
  tamaño-fuente: 20px;
  color: rojo;
}

Prueba por ti mismo

Ejemplo 2

Configura el contenido, el color y el tamaño de fuente para las marcas de lista de <ul>:

ul li::marker {
  contenido: "@ ";
  color: rosa;
  tamaño-fuente: 25px;
}

Prueba por ti mismo

Ejemplo 3

Establece el elemento <h2> con display: lista-item y configura el estilo de contenido y color para las marcas de lista:

h2 {
  counter-increment: h2;
  display: lista-item;
}
h2::marker {
  display: lista-item;
  contenido: "@" counter(h2) " ";
  color: verde-claro;
}
cuerpo {
  counter-reset: h2;
  fuente-familia: verdana;
  margen: 50px;
}

Prueba por ti mismo

Sintaxis CSS

::marker {
  declaraciones css;
}

Detalles técnicos

Compatibilidad del navegador

Los números en la tabla especifican la primera versión del navegador que admite completamente este pseudo-elemento.

Páginas relacionadas

Tutoriales:Elemento pseudo de CSS