Счётчики CSS с помощью ::before
Создавайте автоматическую нумерацию с помощью счётчиков CSS и функции counter().
«Счётчики CSS с помощью ::before» — бесплатный урок CSS Academy на CoddyKit. Это урок 3 из 4. Ты можешь прочитать весь урок бесплатно ниже — а потом практиковать его прямо в браузере с встроенным редактором кода и ИИ-репетитором 24/7. Это часть пути обучения CSS Academy, и твой прогресс синхронизируется между веб-версией и приложением CoddyKit. Курс CSS Academy содержит 4 уроков всего.
Что такое счётчики CSS
Счётчики CSS — это переменные, значения которых поддерживает CSS: их можно увеличивать и отображать в сгенерированном контенте. Они позволяют автоматически нумеровать элементы без JavaScript и ручного управления номерами в HTML.
counter-reset
counter-reset инициализирует или сбрасывает счётчик. Размещайте его на элементе, содержащем элементы для подсчёта.
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>counter-increment
counter-increment увеличивает счётчик на 1 (по умолчанию) при каждом применении. Размещайте его на повторяющихся элементах.
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>Функция counter() в content
Отображайте текущее значение счётчика с помощью counter(name) в свойстве content псевдоэлемента.
<ul class="list">
<li>Item one</li>
<li>Item two</li>
<li>Item three</li>
</ul>Счётчик шагов со стилями
Полностью готовый компонент нумерованных шагов без JavaScript:
<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>Начальное значение счётчика
Задайте пользовательский начальный номер в counter-reset:
<ul class="list">
<li>Item one</li>
<li>Item two</li>
</ul>Стили счётчика
Используйте второй аргумент counter(), чтобы указать тип стиля списка:
<ul class="list" style="list-style:none;padding-left:0;">
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>Вложенные счётчики с помощью counters()
counters(name, separator) (с буквой «s») создаёт вложенную нумерацию, например «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>Сброс во вложенных списках
Каждый вложенный ol наследует область видимости счётчика. Функция counters() автоматически использует всю цепочку счётчиков.
Нумерация разделов
Автоматически нумеруйте заголовки в больших документах:
<h2>Getting Started</h2>
<h3>Installation</h3>
<h3>Configuration</h3>
<h2>Advanced Usage</h2>
<h3>Plugins</h3>Оглавление со счётчиками
Раньше счётчики CSS использовались для оглавлений и форматированных документов. Сегодня эту задачу часто решают фреймворки JavaScript, но счётчики CSS остаются вариантом на основе только CSS.
Быстрая проверка
Какое свойство увеличивает счётчик CSS для каждого подходящего элемента?
Повторение
Счётчики CSS обеспечивают автоматическую нумерацию без JavaScript. Используйте counter-reset для контейнера, counter-increment для повторяющихся элементов, а значение отображайте с помощью counter(name) в свойстве content псевдоэлемента. counters() обрабатывает вложенную нумерацию с разделителями.
Часто задаваемые вопросы
Урок «Счётчики CSS с помощью ::before» бесплатный?
Да — полный текст урока «Счётчики CSS с помощью ::before» бесплатно доступен здесь в веб-версии. Чтобы практиковать его интерактивно (встроенный редактор кода и ИИ-репетитор 24/7) и разблокировать остальной курс CSS Academy, подпишись на CoddyKit PRO. Курс CSS Academy содержит 4 уроков всего.
Чему я научусь в уроке «Счётчики CSS с помощью ::before»?
Создавайте автоматическую нумерацию с помощью счётчиков CSS и функции counter(). Ты практикуешь CSS Academy с помощью реального кода, который запускаешь прямо в браузере, и ИИ-репетитор 24/7 отвечает на твои вопросы во время урока.
Нужен ли мне опыт, чтобы начать CSS Academy?
Предыдущий опыт не требуется. CSS Academy на CoddyKit структурирован для всех уровней — от новичков до продвинутых, поэтому ты можешь начать отсюда или с самого начала и учиться в своем темпе. Это урок 3 из 4.
Сколько времени занимает урок «Счётчики CSS с помощью ::before»?
Большинство уроков CoddyKit занимают около 5–10 минут. Каждый из них компактный и интерактивный, поэтому ты постоянно делаешь прогресс и продолжаешь с того же места в веб-версии и приложении.
Можно ли писать и запускать код в этом уроке CSS Academy?
Да. Каждый урок CSS Academy включает встроенный редактор кода, поэтому ты пишешь и запускаешь реальный код прямо в браузере и получаешь моментальную обратную связь от AI — локальная установка не требуется.
Все уроки этого курса
- Содержимое ::before и ::after
- ::placeholder ::selection и ::marker
- Счётчики CSS с помощью ::before
- Декоративные узоры с псевдоэлементами