DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Das ::marker Pseudoelement dient zur Gestaltung des stilistischen Markers eines Listenelements. Zum Beispiel der Aufzählungspunkt eines Standard-<ul> (z. B. •) oder die Nummerierung eines Standard-<ol> (z. B. 1.). Dies macht es extrem einfach, einfache Dinge wie das Einfärben zu tun.
Wie ein Pseudoelement können Sie ::marker in den DevTools auswählen, um es zu inspizieren. Es befindet sich jedoch nicht wirklich "im DOM" wie ein normales Element.
::marker Pseudoelement aus und zeigt die Stile an.Sie können ::marker mit der content Eigenschaft kombinieren, um zu ändern, was der Marker ist. Zum Beispiel, um Listenaufzählungspunkte durch Emojis zu ersetzen (nur noch nicht in Safari)
Wenn Sie die display Eigenschaft auf list-item für ein beliebiges Element ändern, können Sie dessen ::marker steuern. Hier werden <h3> Elemente nummeriert, was die Idee der CSS-Zähler kombiniert.
Die Marker sind immer noch Listenmarker und unterliegen daher Dingen wie list-style-position.
Browser-Unterstützung
Diese Browser-Support-Daten stammen von Caniuse, das mehr Details enthält. Eine Zahl gibt an, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 86 | 68 | Nein | 86 | 11.1 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 11.3-11.4 |
Wow. Artikel von 2015 immer noch schrecklicher Browser-Support im Jahr 2019 -_-
Scheint nicht so schwer zu implementieren?
Sieht aus, als hätte Safari Unterstützung hinzugefügt. Ich habe den Abschnitt zur Browser-Unterstützung aktualisiert — stimmt für diese Funktionswünsche ab!
bin auf ::marker in einem anderen css-tricks-Artikel gestoßen.. und bin hier gelandet. Es könnte erwähnenswert sein, dass (glaube ich) ::before wegen mangelnder Browserunterstützung immer noch ein guter Fallback sein könnte.
Safari (getestet Version 14.0.2) unterstützt das content-Attribut nicht
Inhalt: ” “;
wird nicht funktionieren
Wir brauchen ein neues Wort für "besiegt von halbherzigen Browser-Implementierungen".
Erster Stopp beim Experimentieren mit marker: Versuchen Sie, irgendetwas mit dem Standard-Aufzählungspunkt zu tun, z. B. seine Größe über font-size zu ändern. Grundlegende Dinge. Jetzt ist er nicht mehr mittig auf der Textzeile. Oh, Sie können keine Positionierung oder Übersetzung oder vertikale Ausrichtung darauf anwenden? ::marker ist im Grunde nutzlos. Verwenden Sie ::before.
Es sieht so aus, als könnten die ::marker Pseudoelemente von Screenreadern wie NVDA gerendert werden, was zu nicht wirklich nützlichen oder sinnvollen Lesungen des Inhalts durch solche assistiven Technologien führt.
Ich stimme dem vorherigen Kommentator zu, diesmal unter Verwendung von Safari 14.0.2 - 'content' funktioniert einfach nicht. Es passiert nichts.