Pseudoelement CSS ::marker reprezentuje pole punktora elementu listy, czyli pole zawierające numer lub inny znacznik elementu listy, i umożliwia jego zmianę za pomocą własności content
oraz sformatowanie w dowolny sposób za pomocą innych własności CSS.
Inaczej mówiąc, pseudoelement ten odnosi się do wszystkich elementów, które mają ustawienie display: list-item
, nie tylko do li
, które mają je przypisane domyślnie.
Dozwolone własności ::marker
Pseudoelement ::marker
obsługuje następujące własności CSS:
- Własności czcionki
- Wszystkie własności animacji i przejść
- white-space,
color
,text-combine-upright
,unicode-bidi
,direction
,content
Przykład użycia ::marker
W tym przykładzie elementy listy będą oznaczone „haczykiem” zamiast standardowym punktorem. Zwróć uwagę, że we własności content
można wpisać więcej spacji niż jedna i wszystkie zostaną uwzględnione.
<style>
li::marker {
content: '✓ ';
color: green;
font-weight: bold;
}
</style>
...
<ul>
<li>Mąka</li>
<li>Chleb</li>
<li>Cukier</li>
<li>Ocet</li>
</ul>
Efekt:

Składnia ::marker
Składnia pseudoelementu ::marker
:
::marker {...}