Pseudoelement CSS ::marker

Definicja i użycie

CSS ::marker Pseudoelementy służą do ustawiania stylu znacznika elementu listy.

Ten pseudoelement pasuje do każdego elementu ustawionego na display: list-item.

Uwaga:Poniższe właściwości mogą być używane z ::marker Używane razem:

  • Wszystkie właściwości czcionek
  • Wszystkie właściwości animacji
  • Wszystkie właściwości przejścia
  • color
  • white-space
  • content
  • text-combine-upright
  • unicode-bidi
  • direction

Przykład

Przykład 1

Ustaw kolor i rozmiar czcionki dla wszystkich znaczników elementów listy:

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

Spróbuj sam!

Przykład 2

Ustaw treść, kolor i rozmiar czcionki znacznika elementu listy w <ul>:

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

Spróbuj sam!

Przykład 3

Ustaw element <h2> na display: list-item i ustaw treść oraz kolor znacznika elementu listy:

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;
}

Spróbuj sam!

Gramatyka CSS

::marker {
  deklaracje css;
}

Szczegółowe informacje techniczne

Wersja: CSS3

Obsługa przeglądarek

Liczby w tabeli wskazują na pierwszą wersję przeglądarki, która w pełni obsługuje ten pseudoelement.

Chrome Edge Firefox Safari Opera
86 86 68 18.1 72

Powiązane strony

Podręcznik:Elementy pseudoelementów CSS