基于Bootstrap 5.2实现动态反向CSS计数器及跨列表连续计数问题

一、动态降序列表（单列表） #

你当前的CSS仅完成了计数器递减的逻辑，但没有将计数器值输出到页面，且无法动态获取列表项数量来设置起始值。纯CSS无法直接获取元素数量，因此需要结合少量JavaScript来实现动态降序，同时不会修改内容原有样式：

1. JavaScript代码（动态设置计数器起始值）：

const historyOl = document.querySelector('ol.history');
const itemCount = historyOl.querySelectorAll('li').length;
// 将计数器起始值设为列表项总数，确保最后一项显示为1
historyOl.style.counterReset = `descendingList ${itemCount}`;

2. 补充CSS（输出计数器值，隐藏默认序号）：

/* 隐藏默认有序列表序号 */
ol.history {
    list-style: none;
    counter-reset: descendingList;
}

/* 生成降序序号，匹配Bootstrap默认样式 */
ol.history li::before {
    counter-increment: descendingList -1;
    content: counter(descendingList) ". ";
    margin-right: .5rem;
    color: #6c757d;
}

这段代码中，JS会自动获取动态列表的项数，设置计数器起始值；CSS则用计数器值替换默认序号，样式和Bootstrap原生序号保持一致，不会影响内容本身。

二、跨列表连续计数（升序+降序） #

要实现两个列表的计数连续，第一个升序、第二个降序衔接，需要共享同一个计数器，并通过JS计算第二个列表的起始值：

假设HTML结构为：

<ol class="list-group list-group-numbered mb-3 ascending">
   <li class="list-group-item">升序项1</li>
   <li class="list-group-item">升序项2</li>
</ol>
<ol class="list-group list-group-numbered descending">
   <li class="list-group-item">降序项1</li>
   <li class="list-group-item">降序项2</li>
</ol>

1. JavaScript代码（计算总计数并设置起始值）：

const ascendingOl = document.querySelector('ol.ascending');
const descendingOl = document.querySelector('ol.descending');
const ascendingCount = ascendingOl.querySelectorAll('li').length;
const descendingCount = descendingOl.querySelectorAll('li').length;

// 第二个列表的计数器起始值 = 升序列表项数 + 降序列表项数
descendingOl.style.counterReset = `combinedCount ${ascendingCount + descendingCount}`;

2. CSS代码（共享计数器，分别处理升序/降序）：

/* 隐藏两个列表的默认序号 */
ol.ascending, ol.descending {
    list-style: none;
}

/* 升序列表：从1开始递增计数器 */
ol.ascending {
    counter-reset: combinedCount;
}
ol.ascending li::before {
    counter-increment: combinedCount;
    content: counter(combinedCount) ". ";
    margin-right: .5rem;
    color: #6c757d;
}

/* 降序列表：递减计数器，衔接升序的计数 */
ol.descending li::before {
    counter-increment: combinedCount -1;
    content: counter(combinedCount) ". ";
    margin-right: .5rem;
    color: #6c757d;
}

原理：第一个列表从1开始递增计数，第二个列表的计数器起始值设为两个列表的总项数，每次递减后，降序列表的第一项就是升序总数+降序总数，最后一项为升序总数+1，完美衔接升序列表的计数序列。

关于content属性的说明 #

要显示自定义计数器的序号，必须使用content属性输出计数器值，同时隐藏默认的列表序号。上述CSS已经将content的样式调整为和Bootstrap默认序号一致，不会改变内容的原有样式。

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