CSS/Selektoren/marker

Der Begriff marker ist mehrdeutig.
Neben dem CSS-Pseudoelement ::marker gibt es noch das SVG marker-Element.

Browserunterstützung
caniuse.com

Der ::marker-Selektor erzeugt ein beliebig formatierbares Markierungselement, das vor dem Inhalt eingefügt wird. (Ursprünglich gab es proprietäre Lösungen mit -webkit-details-marker.) Das Pseudoelement gilt nur für

• summary
• li

Der Browser setzt das ::marker-Element bündig vor <li>-Elemente. Wenn Sie Abstand benötigen, müssen Sie dem Inhalt Leerstellen hinzufügen.

Wenn Sie in einer Liste lediglich die content-Eigenschaft des ::marker-Elements setzen möchten, können Sie auch einfacher die list-style-type-Eigenschaft für die Liste oder die Listeneinträge setzen.

Syntax

::marker

Beispiel

details summary::marker { 
  content:'🡳'; 
}

Links in der Navigation bekommen anstelle des Dreiecks einen Pfeil vor dem summary-Element.

Beachten Sie: Man kann zwar das ::marker-Element selektieren, dann aber nur wenige Eigenschaften formatieren:

• alle font-Eigenschaften
• white-space
• color
• text-combine-upright, unicode-bidi and direction properties
• content
• alle animation und transition-Eigenschaften

Es ist geplant, weitere Eigenschaften aufzunehmen.

Siehe auch

• Selektoren in CSS/Pseudoelemente
• Infobox/Akkordeon mit details
  Formatierung des details-markers
• HTML/Tutorials/Listen/Gestaltung mit CSS#marker

Weblinks

• W3C: 4.2. List Markers: the ::marker pseudo-element CSS Pseudo-Elements Module Level 4
• MDN: ::marker
• Browser-Support: caniuse.com