0

To adding number before the toc list, I wrote bellow code.

ul.toc-wrapper {
  counter-reset: my-counter 0;
  li.toc-item-h2 {
    &::before {
      counter-increment: my-counter;
      content: "0"counter(my-counter)":";
      padding-right: 8px;
    }
  }
  li.toc-item-h3 {
    ...
  }
}

<ul class="toc-wrapper">
  <li class="toc-item-2">some heading</li>
  <li class="toc-item-3">aaaa</li>
  <li class="toc-item-3">bbbb</li>
  <li class="toc-item-2">hoge heading</li>
  <li class="toc-item-3">cccc</li>
  <li class="toc-item-3">dddd</li>
  ...
</ul>

It works fine until number of .toc-item-h2 elements are less than 10.

01: some heading
   aaaa
   bbbb
02: hoge heading
   cccc
   dddd
...
09: piyo heading
010: aaaa heading <- I do not want it with 0. should be 10.

Is there any idea to work it without Javascript?

I can use SCSS in this project if needed. .toc-item-h2 will not be more than 100 .

UPDATE:There are other lis in same level. So I can not use nth-of-type / nth-child.

yasuda_t
  • 125
  • 3
  • 12
  • TLDR: `li:nth-child(n + 10)::before { counter: counter(my-counter) ':'; }` – InSync Jun 28 '23 at 18:00
  • @InSync Thank you for sending me simmilar question! I edited my question. Actually there are other elements on same level. So I could not use `nth-of-type` or `nth-child` . – yasuda_t Jun 28 '23 at 18:24
  • If you don't need to care about browser compatibility, use `:nth-child(n + 10 of .toc-item-h2)`. See [this answer](https://stackoverflow.com/a/75827187) of mine for more information. – InSync Jun 28 '23 at 18:43
  • Thank you for everybody supporting!! I found solution. ```content: counter(my-counter, decimal-leading-zero)``` ```decimal-leading-zero``` solve everything. – yasuda_t Jun 28 '23 at 18:52

0 Answers0