Теперь давайте добавим нумерацию ссылок. Для этого используем оставшийся свободным псевдоэлемент ::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;
  ...
}

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