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 (eingeschränkt formatierbares) Pseudoelement, das vor dem Inhalt eingefügt wird. Es 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 (über content) 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[open] > summary::-webkit-details-marker,
details[open] > summary::marker { 
  content:'🡳'; 
}

Das summary-Element erhält anstelle des browsereigenen Dreiecks einen Pfeil vor dem Inhalt.

Beachten Sie: Im Safari können nur Farben und font-size gestaltet werden, sodass man teilweise noch proprietäre Lösungen mit -webkit-details-marker nutzen muss.

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

• 

  Pseudoelemente

  Elemente nur mit CSS erzeugen

  •  ::after, ::before
  •  ::backdrop
    und mehr …
   
• 

  Akkordeon mit details
  • Formatierung des details-markers

  Popups ohne Programmieren!

   
• 

  Listen in HTML
  • 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