当位数更改时，将列表与自定义样式对齐

Question

我想创建一个编号列表，其中包含枚举为[1]、[2]等的项。此外，我需要使用计数器。下面的片段生成了我感兴趣的基本结果

问题：是否可以将列表编号对齐，使一位数(例如[9](与两位数(例如[10](右对齐？

body {
    counter-reset: cnt;
}
ol {
    list-style-type: none;
}

ol > li:before {
    content: "["counter(cnt)"]";
}
ol > li {
    counter-increment: cnt +1;
}

<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 9 </li>
<li> Item 9 </li>
<li> Item 10 </li>
<li> Item 11 </li>
</ol>

Answer 1

我唯一能想到的就是text-align-last: justify css属性。这需要你稍微改变一下，但也需要一个界限，这样它就不会扩展得太远，看起来很尴尬。你可以看看我下面的例子。但我不是CSS专家，我认为Safari不支持这个功能。

body {
    counter-reset: cnt;
}
ol {
    list-style-type: none;
    width: 200px;
}

ol > li > p:before {
    content: "["counter(cnt)"]";
}
ol > li {
    counter-increment: cnt +1;
}
ol > li > p {
    text-align-last: justify;
}

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