:: marker - Astuces CSS

Anonim

Le ::marker pseudo-élément sert à styliser le marqueur stylistique d'un élément de liste. Par exemple, la puce d'une valeur par défaut

    (par exemple •) ou le chiffre d'un défaut
      (par exemple 1.). Cela rend extrêmement facile de faire des choses simples comme les coloriser.

      Comme un pseudo-élément, vous pourrez sélectionner ::markerdans DevTools pour inspecter, mais ce n'est pas vraiment «dans le DOM» comme un élément normal.

      Chrome DevTools sélectionnant le ::markerpseudo-élément et affichant les styles.

      Vous pouvez combiner ::markeravec la contentpropriété pour changer ce qu'est le marqueur. Par exemple, en remplaçant les puces de liste par des emoji:

      Si vous modifiez la display propriété list-itemsur n'importe quel élément, vous pouvez contrôler son ::marker. Ici

      les éléments sont numérotés, ce qui combine l'idée de compteurs CSS:

      Les marqueurs sont toujours des marqueurs de liste, ils sont donc sujets à des choses comme list-style-position.

      En rapport

      Article le 5 mai 2020

      Recettes de style de liste

      Chris Coyier

      Plus d'information

      • Spec

      Prise en charge du navigateur

      Ces données de support de navigateur proviennent de Caniuse, qui contient plus de détails. Un nombre indique que le navigateur prend en charge la fonctionnalité dans cette version et plus.

      Bureau

      Chrome Firefox C'EST À DIRE Bord Safari
      86 68 Non 86 11,1

      Mobile / tablette

      Chrome Android Android Firefox Android Safari sur iOS
      88 85 81 11,3-11,4