JSFiddle - React, Tailwind, and code Playground

HTML

<a href=# class="pdf-toc-level-2">ChapterA</a><br>
<a href=# class="pdf-toc-level-3">subchapterAA</a><br>
<a href=# class="pdf-toc-level-3">subchaterAB</a><br>
<a href=# class="pdf-toc-level-2">ChapterB</a><br>
<a href=# class="pdf-toc-level-3">subchapterBA</a><br>
<a href=# class="pdf-toc-level-3">subchapterBB</a><br>
<a href=# class="pdf-toc-level-3">subchapterBC</a><br>
<a href=# class="pdf-toc-level-2">ChapterC</a><br>
<a href=# class="pdf-toc-level-3">subchapterCA</a><br>

CSS

body {
  counter-reset: a-toc-level-2 0 a-toc-level-3 0;
}

a.pdf-toc-level-2::before {
  counter-increment: a-toc-level-2;
  content: counter(a-toc-level-2, decimal)" - ";
  padding-right: 0.5rem;
  counter-set: a-toc-level-3;
}

a.pdf-toc-level-3::before {
  counter-increment: a-toc-level-3;
  content: counter(a-toc-level-3, decimal)" - ";
  padding-right: 0.5rem;
  padding-left: 1em;
}