Pseudo-élément ::marker CSS

Définition et utilisation

CSS ::marker Les pseudo-éléments sont utilisés pour définir le style des marqueurs d'éléments de liste.

Ce pseudo-élément s'applique à tout élément réglé sur display : item-de-liste.

Attention :Les propriétés suivantes peuvent être utilisées avec ::marker Utilisation ensemble :

• Toutes les propriétés de police
• Toutes les propriétés d'animation
• Toutes les propriétés de transition
• couleur
• espace-blanc
• contenu
• text-combine-upright
• unicode-bidi
• direction

Exemple

Exemple 1

Définir la couleur et la taille du caractère pour tous les marqueurs d'éléments de liste :

::marker {
  taille-du-caractère : 20px;
  couleur : rouge;
}

Essayez-le vous-même

Exemple 2

Définir le contenu, la couleur et la taille du caractère du marqueur de l'élément de liste <ul> :

ul li::marker {
  contenu : "@ ";
  couleur : rose;
  taille-du-caractère : 25px;
}

Essayez-le vous-même

Exemple 3

Définir <h2> élément comme affichage : item-de-liste, et définir le contenu et la couleur du marqueur d'élément de liste :

h2 {
  incrémentation-counter : h2;
  affichage : item-de-liste;
}
h2::marker {
  affichage : item-de-liste;
  contenu : "@" counter(h2) " ";
  couleur : lightgreen;
}
body {
  counter-reset : h2;
  font-family : verdana;
  marge : 50px;
}

Essayez-le vous-même

Grammaire CSS

::marker {
  déclarations css;
}

Détails techniques

Prise en charge du navigateur

Les nombres dans le tableau indiquent la version du navigateur la première à prendre en charge cet élément pseudo.

Pages associées

Tutoriel :Sélécteur de pseudo-élément CSS