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 {...}