使用CSS计数器的自定义编号列表在数字位数变化时的对齐方法问询

当然可以实现，只需要调整伪元素的排版逻辑，给编号区域设置固定宽度并让内容右对齐即可。修改后的代码如下：

修改后的CSS代码 #

body {
    counter-reset: cnt;
}

ol {
    list-style-type: none;
    padding-left: 0; /* 移除默认内边距，便于自定义布局 */
}

ol > li {
    counter-increment: cnt;
    position: relative;
    padding-left: 30px; /* 为编号预留显示空间 */
}

ol > li:before {
    content: "["counter(cnt)"]";
    position: absolute;
    right: calc(100% - 25px);
    width: 25px; /* 设置足够容纳两位数编号的宽度 */
    text-align: right; /* 让编号内容右对齐 */
}

对应HTML代码 #

<ol>
<li> Item 1 </li>
<li> Item 2 </li>
<li> Item 3 </li>
<li> Item 4 </li>
<li> Item 5 </li>
<li> Item 6 </li>
<li> Item 7 </li>
<li> Item 8 </li>
<li> Item 9 </li>
<li> Item 10 </li>
<li> Item 11 </li>
</ol>

实现原理 #

1. 给<li>设置相对定位，让伪元素可以基于它进行绝对定位
2. 通过padding-left给编号留出独立的显示区域
3. 伪元素设置固定宽度并开启右对齐，这样一位数（如[9]）和两位数（如[10]）都会靠区域右侧对齐，视觉上保持整齐

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