移除关联元素后如何保持CSS计数器数值不变？

我用CSS计数器给列表项计数，把编号加到::before伪元素的content里，但隐藏某个列表元素后，编号会自动调整维持连续。我想让隐藏元素后编号不变，示例代码如下：

原JS代码 #

function remove() {
  document.getElementsByClassName("list-item")[0].style.display = "none";
}

原CSS代码 #

.number-list {
  list-style-type: none;
  counter-reset: list-count 0;
}

.list-item {
  counter-increment: list-count 1;
}

.list-item::before {
  content: counter(list-count) ". ";
}

原HTML代码 #

<div>
  <ul class="number-list">
    <li class="list-item">Canada</li>
    <li class="list-item">The U.S.A.</li>
    <li class="list-item">Mexico</li>
  </ul>
  <button onclick="remove()">Set first list item display to none</button>
</div>

解决方案1：用自定义属性存固定编号 #

直接给每个列表项加自定义属性预设编号，CSS读取这个属性作为伪元素内容，彻底摆脱计数器自动递增的逻辑，隐藏元素后编号自然不会变。

修改后完整代码 #

HTML

<div>
  <ul class="number-list">
    <li class="list-item" data-index="1">Canada</li>
    <li class="list-item" data-index="2">The U.S.A.</li>
    <li class="list-item" data-index="3">Mexico</li>
  </ul>
  <button onclick="remove()">隐藏第一个列表项</button>
</div>

CSS

.number-list {
  list-style-type: none;
}

.list-item::before {
  content: attr(data-index) ". ";
}

JS

function remove() {
  document.getElementsByClassName("list-item")[0].style.display = "none";
}

解决方案2：给每个列表项单独设置计数器初始值 #

如果不想改动HTML，可以利用:nth-child选择器给每个列表项单独指定计数器的初始值，让每个元素的编号独立：

修改后CSS代码 #

.number-list {
  list-style-type: none;
}

.list-item:nth-child(1) {
  counter-reset: item 1;
}
.list-item:nth-child(2) {
  counter-reset: item 2;
}
.list-item:nth-child(3) {
  counter-reset: item 3;
}

.list-item::before {
  content: counter(item) ". ";
}

注意 #

这个方法适合列表项数量固定的场景，如果是动态生成的列表，优先用方案1，通过JS给每个元素自动设置data-index会更灵活。

内容的提问来源于stack exchange，提问作者StackedAndOverflowed