::marker
Stylizuje znacznik elementu listy: kropkę w liście ul albo numer w liście ol.
Przykład
#.steps li::marker {
color: #a78bfa;
font-weight: 700;
}<ol class="steps stage" style="margin: 0; padding: 12px 12px 12px 34px;">
<li>Wybierz świat</li>
<li>Obejrzyj wideo wprowadzające</li>
<li>Rozwiąż pierwsze zadanie</li>
</ol>Definicja i zastosowanie
#Każdy element z display: list-item, czyli domyślnie każdy <li>, ma znacznik: kropkę, kółko, kwadrat albo numer. Pseudoelement ::marker pozwala ostylować go osobno, bez sztuczek z ::before i wyłączaniem punktorów. Tekst punktu zostaje bez zmian.
Zestaw obsługiwanych właściwości jest ograniczony: kolor, właściwości czcionki, content, white-space oraz animacje i przejścia. Tło, marginesy czy obramowanie nie zadziałają. Położenie znacznika (wewnątrz lub na zewnątrz bloku tekstu) ustawia się przez list-style-position na samym elemencie listy.
Sam symbol najłatwiej zmienić właściwością list-style-type na liście, np. list-style-type: "✓ " albo upper-roman. ::marker przydaje się wtedy do koloru i wagi, żeby numery były fioletowe i pogrubione, a tekst zwykły.
Składnia
#selektor::marker { właściwość: wartość; }Typowe style
#- Fioletowe numery obok zwykłego tekstu punktów.
- Pogrubione i większe numery. Tekst punktów się nie zmienia.
- Symbol ustawiasz na liście przez
list-style-type, a jego kolor przez::marker. - Najedź na punkt listy: zmienia się tylko kolor jego numeru.
Typowe style w praktyce
#color
.demo li::marker { color: #a78bfa; }font-weight
.demo li::marker {
color: #fbbf24;
font-weight: 800;
font-size: 1.15em;
}list-style-type + ::marker
list-style-type, a jego kolor przez ::marker..demo { list-style-type: "✓ "; }
.demo li::marker { color: #10b981; }li:hover::marker
.demo li:hover::marker { color: #f43f5e; }Obsługa przeglądarek
#Szeroko dostępne
Działa we wszystkich nowoczesnych przeglądarkach, także na telefonach. Możesz używać bez obaw.
- Chrome
- Edge
- Firefox
- Safari
Dobre praktyki
#- Do zmiany samego symbolu używaj
list-style-type, a::markerdo koloru i czcionki. Taki podział jest najprostszy i najbardziej przewidywalny. - Jeśli usuniesz punktory przez
list-style: none, VoiceOver w Safari może przestać ogłaszać element jako listę. Pomaga wtedy dodanierole="list"do<ul>lub<ol>.
Powiązane hasła
#- list-style-typeUstawia rodzaj znacznika elementów listy: kropki, cyfry, litery lub własny symbol.
- list-style-positionUstala, czy znacznik listy stoi na zewnątrz czy wewnątrz bloku elementu.
- ::beforeTworzy wirtualny element na początku zawartości elementu. Służy do ikon, ozdobników i etykiet bez dodatkowego HTML.
- colorUstawia kolor tekstu i domyślny kolor obramowań, dekoracji oraz ikon SVG z currentcolor.
- contentWstawia treść generowaną w pseudoelementach ::before i ::after.
Widzisz błąd albo brakuje przykładu? Napisz do nas.