Pseudo-elemento CSS ::marker

Definizione e utilizzo

CSS ::marker Il pseudo-elemento viene utilizzato per impostare lo stile del segno dell'elemento elenco.

Questo pseudo-elemento si applica a qualsiasi elemento impostato con display: list-item.

Attenzione:Le seguenti proprietà possono essere utilizzate con ::marker Utilizzo congiunto:

• Tutte le proprietà dei caratteri
• Tutte le proprietà di animazione
• Tutte le proprietà di transizione
• colore
• white-space
• contenuto
• text-combine-upright
• unicode-bidi
• direzione

Esempio

Esempio 1

Imposta colore e dimensione del carattere per tutti i segni degli elementi elenco:

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

Prova tu stesso

Esempio 2

Imposta contenuto, colore e dimensione del carattere del segno dell'elemento elenco per <ul>:

ul li::marker {
  contenuto: "@ ";
  colore: pink;
  font-size: 25px;
}

Prova tu stesso

Esempio 3

Imposta <h2> come display: list-item e assegna contenuto e colore al segno dell'elemento elenco:

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

Prova tu stesso

Sintassi CSS

::marker {
  dichiarazioni css;
}

Dettagli tecnici

Supporto del browser

I numeri nella tabella indicano la versione del browser iniziale che supporta completamente questo pseudo-elemento.

Pagine correlate

Guida:Fittizia CSS