Как пронумеровать заголовки автоматически

Короткий ответ

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

<style>
  .doc { counter-reset: chapter; }
  .doc h2 { counter-increment: chapter; font-size: 18px; }
  .doc h2::before { content: counter(chapter) ". "; color: tomato; }
</style>
 
<div class="doc">
  <h2>Getting started</h2>
  <h2>Installation</h2>
  <h2>First project</h2>
</div>

counter-reset создаёт счётчик со значением 0, counter-increment прибавляет единицу, counter() подставляет текущее значение в content. Если добавить или удалить заголовок, номера пересчитаются сами.

Вложенная нумерация 1.1, 1.2

Второй счётчик сбрасывается на каждом <h2>, чтобы подразделы каждой главы начинались с единицы:

<style>
  .doc { counter-reset: chapter; }
  .doc h2 { counter-increment: chapter; counter-reset: section; font-size: 18px; }
  .doc h3 { counter-increment: section; font-size: 15px; margin-left: 16px; }
  .doc h2::before { content: counter(chapter) ". "; }
  .doc h3::before { content: counter(chapter) "." counter(section) " "; }
</style>
 
<div class="doc">
  <h2>Layout</h2>
  <h3>Flexbox</h3>
  <h3>Grid</h3>
  <h2>Colors</h2>
  <h3>Gradients</h3>
</div>

Другой стиль номеров

Вторым аргументом counter() принимает стиль списка: counter(chapter, upper-roman) даёт I, II, III, а counter(chapter, lower-alpha) — a, b, c.

Частая ошибка

Писать counter-reset на самом заголовке, а не на общем родителе. Тогда каждый заголовок создаёт свой счётчик заново, и у всех получается номер 1. Сбрасывайте счётчик на элементе, который содержит все нумеруемые заголовки, а у вложенного уровня — на заголовке уровнем выше.