:: marker - CSS-Tricks

Anonim

Das ::marker Pseudoelement dient zum Stylen der stilistischen Markierung eines Listenelements. Zum Beispiel der Aufzählungspunkt eines Standards

    (zB •) oder die Ziffer einer Standardeinstellung
      (zB 1.). Dies macht es extrem einfach, einfache Dinge wie das Kolorieren zu tun.

      Wie bei einem ::markerPseudoelement können Sie in DevTools eine Inspektion auswählen , aber es ist nicht wirklich „im DOM“ wie ein normales Element.

      Chrome DevTools wählt das Pseudoelement aus ::markerund zeigt die Stile an.

      Sie können ::markermit der contentEigenschaft kombinieren , um die Markierung zu ändern. Beispiel: Ersetzen von Listenaufzählungszeichen durch Emoji:

      Wenn Sie die display Eigenschaft für list-itemein Element ändern , können Sie dessen steuern ::marker. Hier

      Die Elemente sind nummeriert, was die Idee der CSS-Zähler kombiniert:

      Die Markierungen sind immer noch Listenmarkierungen, unterliegen also Dingen wie list-style-position.

      verbunden

      Artikel am 5. Mai 2020

      Listenstil Rezepte

      Chris Coyier

      Mehr Informationen

      • Spec

      Browser-Unterstützung

      Diese Browser-Unterstützungsdaten stammen von Caniuse, das detaillierter ist. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.

      Desktop

      Chrom Feuerfuchs IE Kante Safari
      86 68 Nein 86 11.1

      Handy / Tablet

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