• Теория
  • Теория

Хлебные крошки, шаг 4

Теперь давайте добавим нумерацию ссылок. Для этого используем оставшийся свободным псевдоэлемент ::before.

Мы будем задавать номера ссылок автоматически с помощью CSS. Для этого используем следующие свойства:

  • counter-reset, которое позволяет создать переменную-счётчик;
  • counter-increment, которое позволяет увеличивать значение счётчика;
  • функцию counter(), которая позволяет передавать значение счётчика свойству content у псевдоэлементов.

В исходном CSS для .breadcrumbs уже добавлено свойство counter-reset: flag. То есть наш счётчик уже создан и называется flag.

Чтобы увеличивать счётчик, нужно добавить свойство counter-increment: flag к каждому элементу, который будет нумероваться. А чтобы считывать значение счётчика и передавать его в псевдоэлементы, нужно задать им свойство content: counter(flag).

Логично и изменение нумерации, и её отображение производить в самом ::before у ссылок:

.breadcrumbs a::before {
  content: counter(flag);
  counter-increment: flag;
  ...
}

Ну и, конечно же, добавим базовое оформление для номеров ссылок.

Хотите всё и сразу? HTML, CSS, JavaScript, React, Node.js, оплачиваемая стажировка в Лиге А и гарантия трудоустройства. Записывайтесь на профессию «Фулстек-разработчик», которая стартует 20 мая 2024. Всего от 5520 ₽в месяц.

Минимальный вид табов
  • index.html
HTML
HTML

Вы перешли на другую страницу

Кликните внутри мини-браузера, чтобы поставить фокус в это окно.

100%
Бабушка Кекс

Притормози, дружище

Проходить вызовы части «Мастерская: декоративные эффекты» тренажёра «Погружение в декоративные эффекты» можно после регистрации и оформления подписки.