Обратная нумерация списка в сочетании с скобками

Question

Я пытаюсь получить список с обратным номером в html / css, который заключен в квадратные скобки.Вот так:

[3] Item
[2] Item
[1] Item

Решение для первого легко <ol reversed> и решение длявторое требование, которое я нашел здесь ( нумерация HTML в скобках ).
Однако, если я объединю эти два, это не даст ожидаемого результата.

CSS:

ol.bracket {
counter-reset: list;
}
ol.bracket > li {
list-style: none;
position: relative;
}
ol.bracket > li:before {
counter-increment: list;
content: "[" counter(list) "]  ";
position: absolute;
left: -2em;
}

HTML:

<ol reversed class="bracket">
  <li>First item</li>
  <li>Second item</li>
</ol>

Как мне совместить две вещи?
Спасибо за вашу помощь!:)

Answer 1

Расширяя начальный комментарий, вот решение CSS + JS:

https://jsfiddle.net/hyvyys/Lmay2wft/3/

<ol reversed class="bracket">
  <li>First item</li>
  <li>Second item</li>
</ol>
<ol reversed class="bracket">
  <li>First item</li>
  <li>Second item</li>
  <li>third item</li>
  <li>fourth item</li>
  <li>fifth item</li>
</ol>

document.querySelectorAll('.bracket')
  .forEach(list => {
    const c = list.querySelectorAll('li').length + 1;
    list.style.counterReset = `list ${c}`;
  });

ol.bracket>li {
  list-style: none;
  position: relative;
}

ol.bracket>li:before {
  counter-increment: list -1;
  content: "[" counter(list) "]  ";
  position: absolute;
  left: -2em;
}