​Как можно расставить автоматическую нумерацию элементов, не относящихся к спискам при помощи CSS?

В следующем примере показано простое использование функции counter():

<section class="table-of-contents">
  <h1 class="title">Оглавление</h1>
  <h2 class="chapter">HTML и CSS</h2>
  <h2 class="chapter">Создание стилей и таблиц стилей</h2>
  <h2 class="chapter">Селекторы: выбор форматируемых элементов</h2>
  <h2 class="chapter">Механизм наследования стилей</h2>
  <h2 class="chapter">Управление сложной структурой стилей: каскад</h2>
  <h2 class="chapter">Поля, отступы, границы</h2>
</section>

.table-of-contents {
  counter-reset: chapter 0;
}

.chapter {
  counter-increment: chapter 1;
}

.chapter::before {
  content: "Глава "counter(chapter) ": ";
}

Frontend Interview - собеседования по Javascript / Html / Css

​Как можно расставить автоматическую нумерацию элементов, не относящихся к спискам при помощи CSS?

В следующем примере показано простое использование функции counter():

<section class="table-of-contents">
  <h1 class="title">Оглавление</h1>
  <h2 class="chapter">HTML и CSS</h2>
  <h2 class="chapter">Создание стилей и таблиц стилей</h2>
  <h2 class="chapter">Селекторы: выбор форматируемых элементов</h2>
  <h2 class="chapter">Механизм наследования стилей</h2>
  <h2 class="chapter">Управление сложной структурой стилей: каскад</h2>
  <h2 class="chapter">Поля, отступы, границы</h2>
</section>

На элементе <section> создаём счётчик с именем chapter и начальным значением 0:

.table-of-contents {
  counter-reset: chapter 0;
}

Устанавливаем увеличение значения счётчика сhapter, используя свойство counter-increment. Далее подставляем значение счётчика chapter через функцию counter():

.chapter {
  counter-increment: chapter 1;
}

.chapter::before {
  content: "Глава "counter(chapter) ": ";
}

👉 @frontendInterview

🔥14👍7

hottg.com/frontendInterview/4367

1.73K viewsFeb 12 at 09:02