CSS Academy · Lekcja

Liczniki CSS z użyciem ::before

Nauczy się Pan/Pani tworzyć automatyczne systemy numeracji za pomocą liczników CSS i funkcji counter().

Liczniki CSS z użyciem ::before to bezpłatna lekcja CSS Academy na CoddyKit. To lekcja 3 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej CSS Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs CSS Academy zawiera 4 lekcji w sumie.

Czym są liczniki CSS?

Liczniki CSS to zmienne utrzymywane przez CSS, których wartości można zwiększać i wyświetlać w generowanej zawartości. Umożliwiają automatyczną numerację bez JavaScriptu lub ręcznego zarządzania numerami w HTML.

counter-reset

counter-reset inicjuje lub resetuje licznik. Należy umieścić ją na elemencie zawierającym elementy, które mają być zliczane.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

counter-increment

counter-increment zwiększa wartość licznika o 1 (domyślnie) za każdym razem, gdy jest stosowana. Należy umieścić ją na powtarzających się elementach.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Funkcja counter() we właściwości content

Bieżącą wartość licznika należy wyświetlić za pomocą counter(name) we właściwości content pseudoelementu.

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
  <li>Item three</li>
</ul>

Stylizowany licznik kroków

Kompletny komponent numerowanych kroków bez JavaScriptu:

<div class="steps">
  <div class="step">Create an account</div>
  <div class="step">Verify your email</div>
  <div class="step">Start your first project</div>
</div>

Początkowa wartość licznika

Niestandardową liczbę początkową należy ustawić w counter-reset:

<ul class="list">
  <li>Item one</li>
  <li>Item two</li>
</ul>

Style licznika

Drugiego argumentu funkcji counter() należy użyć do określenia typu stylu listy:

<ul class="list" style="list-style:none;padding-left:0;">
  <li>First</li>
  <li>Second</li>
  <li>Third</li>
</ul>

Zagnieżdżone liczniki za pomocą counters()

Funkcja counters(name, separator) (z literą „s”) tworzy zagnieżdżoną numerację, taką jak „1.1”, „1.2”, „2.1”:

<ol>
  <li>Chapter one
    <ol>
      <li>Intro</li>
      <li>Details</li>
    </ol>
  </li>
  <li>Chapter two
    <ol>
      <li>Overview</li>
    </ol>
  </li>
</ol>

Resetowanie na zagnieżdżonych listach

Każda zagnieżdżona lista ol dziedziczy zakres licznika. Funkcja counters() automatycznie korzysta z pełnego łańcucha liczników.

Numerowanie sekcji

Automatyczne numerowanie nagłówków w długich dokumentach:

<h2>Getting Started</h2>
<h3>Installation</h3>
<h3>Configuration</h3>
<h2>Advanced Usage</h2>
<h3>Plugins</h3>

Spis treści z licznikami

Liczniki CSS były historycznie używane do tworzenia spisów treści i formatowania dokumentów. Obecnie często zajmują się tym frameworki JavaScript, ale liczniki CSS nadal stanowią rozwiązanie oparte wyłącznie na CSS.

Szybkie sprawdzenie

Jaka właściwość zwiększa licznik CSS dla każdego pasującego elementu?

Podsumowanie

Liczniki CSS umożliwiają automatyczną numerację bez JavaScriptu. Należy użyć counter-reset na kontenerze, counter-increment na powtarzających się elementach, a następnie wyświetlić wartość za pomocą counter(name) we właściwości content pseudoelementu. counters() obsługuje zagnieżdżone numerowanie z separatorami.

Często zadawane pytania

Czy lekcja „Liczniki CSS z użyciem ::before” jest bezpłatna?

Tak — pełny tekst „Liczniki CSS z użyciem ::before” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu CSS Academy, przejdź na CoddyKit PRO. Kurs CSS Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Liczniki CSS z użyciem ::before”?

Nauczy się Pan/Pani tworzyć automatyczne systemy numeracji za pomocą liczników CSS i funkcji counter(). Ćwiczysz CSS Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć CSS Academy?

Nie wymagamy żadnego doświadczenia. CSS Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 3 z 4.

Ile czasu zajmuje lekcja „Liczniki CSS z użyciem ::before”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji CSS Academy?

Tak. Każda lekcja CSS Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

← Powrót do CSS Academy