css - CSS カウンター - デモは機能するが、ブラウザーでは失敗する

Question

Hugo Giraudelの素晴らしい CSS カウンターの例を実装しようとしているときに、ブラウザーで設定しようとすると失敗します。

counter-resetorを使用していincrementないため、どの参照を変更する必要があるかわかりません。私の例では、カウントする必要がある参照は 2 つしかありません。リンクは正しいように見えますが、カウンターは 1 から 2 に変わりません。

以下の短い例...

Low level <a href="#features" aria-describedby="footnote-label" id="features-ref">features</a> don't come into existence in the span of a year.

<a href="#criticism" aria-describedby="footnote-label" id="criticism-ref">criticism</a> they receive for this stance.

<footer>
  <h2 class="visually-hidden" id="footnote-label">Footnotes</h2>
  <ol>
    <li id="features">
      Swift took 4 years. LLVM reached the 1.0 milestone in 2003. <a href="#features-ref" aria-label="Back to content">↩&lt;/a>
    </li>
    <li id="criticism">
      In Apple's case, it might be, "Damn the investors and pundits!" <a href="#criticism-ref" aria-label="Back to content">↩&lt;/a>
    </li>
  </ol>
</footer>