Bootstrap 5 list-group-numbered无法修改为lower-roman列表样式求助

问题原因 #

Bootstrap 5 带编号列表组的序号是通过CSS计数器生成的，完全替代了原生<ol>的列表标记，因此给::before伪元素设置list-style-type属性不会生效。

解决方法 #

只需要修改::before伪元素的content属性，在计数器函数中指定输出格式为lower-roman即可，正确CSS代码如下：

ol.list-group-numbered.contract li.contract::before {
    font-size: 2.25rem !important;
    color: #AED6DE !important;
    /* 核心配置：指定计数器输出小写罗马数字，后面的分隔符可按需调整 */
    content: counter(list-group-counter, lower-roman) ". " !important;
}

补充说明 #

• counter()函数的第二个参数支持所有合法的列表样式值，如果你需要其他编号格式，比如大写罗马数字改upper-roman、小写字母改lower-alpha即可。
• 上述代码直接复用Bootstrap内置的list-group-counter计数器，不需要额外修改父元素的计数器初始化配置，兼容性更好。

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