CSS ::marker pseudo-element

Definition og brug

CSS ::marker Pseudo-element bruges til at sætte stil på listenemne-mærker.

Dette pseudo-element er egnet til enhver element, der er sat til display: list-item.

Bemærk:Følgende egenskaber kan bruges sammen med ::marker Brug sammen:

• Alle skrifttypepropertyer
• Alle animationsegenskaber
• Alle overgangspropertyer
• color
• white-space
• content
• text-combine-upright
• unicode-bidi
• Retning

Eksempel

Eksempel 1

Angiv farve og skriftstørrelse for alle listenemne-mærker:

::marker {
  font-size: 20px;
  color: red;
}

Prøv det selv

Eksempel 2

Angiv indhold, farve og skriftstørrelse for listenemne-mærket for <ul>-listen:

ul li::marker {
  content: "@ ";
  color: pink;
  font-size: 25px;
}

Prøv det selv

Eksempel 3

Sæt <h2>-elementet til display: list-item og angiv indhold og farve for listenemne-mærket:

h2 {
  counter-increment: h2;
  display: list-item;
}
h2::marker {
  display: list-item;
  content: "@" counter(h2) " ";
  color: lightgreen;
}
body {
  counter-reset: h2;
  font-family: verdana;
  margin: 50px;
}

Prøv det selv

CSS-sprog

::marker {
  css-erklæringer;
}

Tekniske detaljer

Browser-understøttelse

Tallene i tabellen angiver den første browser-version, der fuldt ud understøtter dette pseudo-element.

Relaterede sider

Lær at brugeCSS pseudo-element