CSS counter-reset не работает внутри псевдоэлементов

Question

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

body {
  font: smaller sans-serif;
  counter-reset: h1 h2;
}
h1:before {
  counter-reset: h2;
  content: counter(h1) ". ";
  counter-increment: h1;
}
h2:before {
  content: counter(h1) "." counter(h2) ". ";
  counter-increment: h2;
}

<h1>Heading</h1>
<h2>Sub-heading</h2>
<h2>Sub-heading</h2>
<h1>Heading</h1>
<h2>Sub-heading</h2>
<h2>Sub-heading</h2>

Тем не менее, следующее работает как ожидалось:

body {
  font: smaller sans-serif;
  counter-reset: h1 h2;
}
h1:before {
  content: counter(h1) ". ";
  counter-increment: h1;
}
h1 {
  counter-reset: h2;
}
h2:before {
  content: counter(h1) "." counter(h2) ". ";
  counter-increment: h2;
}

<h1>Heading</h1>
<h2>Sub-heading</h2>
<h2>Sub-heading</h2>
<h1>Heading</h1>
<h2>Sub-heading</h2>
<h2>Sub-heading</h2>

Мой вопрос, почему counter-reset не работает внутри псевдоэлементов?

Answer 1

Я считаю, что это проблема масштаба. Документы утверждают:

Счетчики являются "самозакрывающимися", в том смысле, что сброс счетчика в элементе-потомке или псевдоэлементе автоматически создает новый экземпляр счетчика....

... Область действия счетчика начинается с первого элемента в документе, который имеет "возврат счетчика" для этого счетчика и включает в себя потомков элемента и его следующих братьев и сестер с их потомками. Тем не менее, он не включает никаких элементов в область действия счетчика с таким же именем, созданного "возвратом счетчика" на более позднем элементе или последующим "сбросом счетчика" на том же элементе.

Насколько я понимаю, когда вы сбрасываете счетчик, в родительском элементе создается новый экземпляр счетчика. Если вы делаете это на h1:before он создается на этом сингле <h1> элемент, который затем сразу закрывается... следовательно, вы не получите сброс на начальный счетчик.