CSS ::marker pseudo-element

Definitie en gebruik

CSS ::marker Pseudo-elementen worden gebruikt om de stijl van de lijstitem-aanduiding in te stellen.

Deze pseudo-element is geschikt voor elk element dat is ingesteld op display: lijst-item.

Opmerking:De volgende eigenschappen kunnen worden gebruikt met ::marker Gebruik samen:

• Alle letter-eigenschappen
• Alle animatie-eigenschappen
• Alle overgangseigenschappen
• kleur
• witruimte
• inhoud
• text-combine-upright
• unicode-bidi
• richting

Voorbeeld

Voorbeeld 1

Stel kleur en lettergrootte in voor alle lijstitem-aanduidingen:

::marker {
  font-size: 20px;
  kleur: rood;
}

Probeer het zelf uit

Voorbeeld 2

Stel inhoud, kleur en lettergrootte in voor de lijstitem-aanduiding van <ul> lijst:

ul li::marker {
  inhoud: "@ ";
  kleur: roze;
  font-size: 25px;
}

Probeer het zelf uit

Voorbeeld 3

Stel <h2> element in als display: lijst-item en stel inhoud en kleur in voor de lijstitem-aanduiding:

h2 {
  counter-increment: h2;
  display: lijst-item;
}
h2::marker {
  display: lijst-item;
  inhoud: "@" counter(h2) " ";
  kleur: lichtgroen;
}
body {
  counter-reset: h2;
  font-family: verdana;
  marge: 50px;
}

Probeer het zelf uit

CSS-syntaxis

::marker {
  css-declaraties;
}

Technische details

Browserondersteuning

De cijfers in de tabel geven de eerste browserversie aan die de pseudo-element volledig ondersteunt aan.

Gerelateerde pagina's

Handleiding:CSS pseudoelement