列表的倒序編號結合括號

Question

我試圖在 html/css 中有一個反向編號的列表，它周圍有方括號。 像這樣：

[3] 項目
[2] 項目
[1] 項目

第一個解決方案很容易<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;
}