Kurs HTML

Wprowadzenie: Stylizowanie znaczników listy

Listy nienumerowane (<ul>) i numerowane (<ol>) domyślnie wyświetlają znaczniki (punktory lub numery) przed każdym elementem listy (<li>). Przez długi czas stylizowanie tych znaczników było ograniczone (głównie za pomocą list-style-type, list-style-image i list-style-position).

Pseudoelement ::marker został wprowadzony, aby umożliwić **bezpośrednie stylizowanie** tych znaczników, dając znacznie większą kontrolę nad ich wyglądem.

::marker wybiera "pudełko" zawierające punktor lub numer elementu listy <li> (a także elementów z display: list-item).

Jak działa ::marker?

Pseudoelement ::marker jest generowany automatycznie dla każdego elementu <li> (lub elementu z display: list-item). Możemy go wybrać i zastosować do niego określone właściwości CSS.

<ul class="styled-markers">
  <li>Element pierwszy</li>
  <li>Element drugi</li>
  <li>Element trzeci</li>
</ul>

<ol class="styled-markers">
  <li>Pozycja 1</li>
  <li>Pozycja 2</li>
  <li>Pozycja 3</li>
</ol>

/* Stylizuj znaczniki (punktory i numery) dla wszystkich li w .styled-markers */
.styled-markers li::marker {
  color: red; /* Zmień kolor znacznika */
  font-size: 1.2em; /* Powiększ znacznik */
  font-weight: bold; /* Pogrub znacznik */
}

/* Można też użyć bardziej specyficznych selektorów */
ul.styled-markers li::marker {
    /* Styl tylko dla punktorów w ul */
}
ol.styled-markers li::marker {
    /* Styl tylko dla numerów w ol */
}

W powyższym przykładzie, zarówno punktory listy ul, jak i numery listy ol będą czerwone, pogrubione i nieco większe niż domyślnie.

Dozwolone właściwości CSS dla ::marker

Zakres właściwości CSS, które można bezpiecznie stosować do ::marker, jest obecnie **ograniczony**, choć specyfikacja ewoluuje. Najczęściej wspierane i używane właściwości to:

• Czcionka: font (i jego składowe jak font-size, font-weight, font-family).
• Kolor: color.
• Odstępy tekstu: word-spacing, letter-spacing.
• Kierunek tekstu: direction, unicode-bidi.
• content: Pozwala **zastąpić** domyślny punktor/numer własną treścią (np. symbolem, emoji, tekstem).
• Niektóre właściwości animacji i przejść (transition, animation).

Właściwości takie jak background, padding, border, margin, display, position, width, height zazwyczaj **nie działają** lub mają nieprzewidywalne efekty na ::marker. Jeśli potrzebujesz bardziej zaawansowanego stylizowania (np. tła dla punktora), często nadal konieczne jest użycie techniki z ::before i ukryciem domyślnego markera (list-style: none;).

Zmiana treści znacznika za pomocą content

Jedną z najciekawszych możliwości ::marker jest użycie właściwości content do całkowitej zmiany wyglądu znacznika.

<ul class="custom-markers">
  <li>Zadanie 1</li>
  <li>Zadanie 2</li>
  <li>Zadanie 3</li>
</ul>

<ol class="custom-markers-ol">
    <li>Krok pierwszy</li>
    <li>Krok drugi</li>
</ol>

/* Zastąp domyślne punktory strzałkami */
.custom-markers li::marker {
  content: "→ "; /* Strzałka i spacja */
  color: green;
}

/* Zastąp domyślne numery tekstem "Krok X." */
/* Wymaga użycia liczników CSS */
.custom-markers-ol {
    list-style: none; /* Ukryj domyślną numerację */
    counter-reset: step-counter; /* Zainicjuj licznik */
}
.custom-markers-ol li {
    counter-increment: step-counter; /* Zwiększ licznik dla każdego li */
}
.custom-markers-ol li::marker {
    content: "Krok " counter(step-counter) ". "; /* Użyj licznika w content */
    color: darkblue;
    font-weight: bold;
}

W pierwszym przykładzie, punktory listy ul zostaną zastąpione zielonymi strzałkami.

W drugim przykładzie, używamy liczników CSS (counter-reset, counter-increment) i funkcji counter() wewnątrz content pseudoelementu ::marker, aby stworzyć niestandardową numerację "Krok 1.", "Krok 2." itd.