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

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

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>

Ответы

Ответ 1

Я считаю, что это проблема масштаба. Состояние docs:

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

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

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