html - 列表的反向编号与括号结合

Question

我想在 html/css 中有一个反向编号的列表，它周围有方括号。像这样:

[3]项
[2] 元素
[1] 元素

第一个的解决方案很简单 <ol reversed>以及我在此处找到的第二个要求的解决方案 ( HTML numbering with brackets )。
但是，如果我将这两者结合起来，它似乎并没有给出预期的结果。

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;
}