Html 无序列表li后的相等空间

我删除了

的

后面的点（.），并在数字后面加上“|”

我通过使用以下代码实现了这一点：

ol {
    counter-reset: item;
}
ol li::before {
    content: counter(item) " ";
    counter-increment: item;
    padding-right: 15px;
    border-right: 2.5px solid rgba(37, 194, 240, 0.8);
    margin-right: 15px;
}

但是数字后面的空格不相等

我需要数字后面有统一的间距。 请帮我解决这个问题

ol{计数器重置：项；列：2；}
ol li{显示：块；页边距底部：10px；}
奥利：以前{
内容：柜台（项目）“；
反增量：项目；
右侧填充：15px；
右边框：2.5px实心rgba（37194240,0.8）；
右边距：15px；
}

我的abc
生活色彩
活食
奥拉
优步
聊得好
食用熊猫
多米诺骨牌
点击食物
Smartyo
潮水
网络系列
戈普
现场直播

添加一组宽度（比如3em）…并将文本向右对齐

ol{
计数器重置：项目；
栏目：2个；
}
欧利{
显示：块；
边缘底部：10px；
}
奥利：以前{
内容：柜台（项目）“；
反增量：项目；
右侧填充：15px；
右边框：2.5px实心rgba（37194240,0.8）；
右边距：15px；
宽度：3em；
文本对齐：右对齐；
显示：内联块；
}

我的abc
生活色彩
活食
奥拉
优步
聊得好
食用熊猫
多米诺骨牌
点击食物
Smartyo
潮水
网络系列
戈普
现场直播

试试这些css代码

ol{counter-reset: item;columns: 2;}
ol li{display:block;margin-bottom:10px;position: relative;padding-left: 40px;}
ol li::before {
    content: counter(item) " ";
    counter-increment: item;
    position: absolute;
    left: 0px;
}
ol li::after {
    content: " ";
    position: absolute;
    background-color: rgba(37, 194, 240, 0.8);
    height: 100%;
    width: 2px;
    top: 0px;
    left: 25px;
}

---

如果只希望以某些项目为目标，则可以使用类型选择器的：nth:

ol li:nth-of-type(n+10)::before {

}

---

您可以尝试表格布局，而无需设置固定的宽度，无论您使用的数字是多少，它都可以工作

ol{
计数器重置：项目；
栏目：2个；
}
欧利{
显示：表格行；
}
奥利：以前{
显示：表格单元格；
/*文本对齐：右；如果要向右对齐，请取消注释*/
内容：柜台（项目）“；
反增量：第99项；
右侧填充：30px；
垫底：10px；
/*我们使用背景而不是边框*/
背景：线性梯度（rgba（371942400.8），rgba（371942400.8））
右15px顶部0//*右=右填充*/
2.5px计算（100%-10px）/*宽度=2.5px高度=100%-填充底部*/
不重复；
}

我的abc
生活色彩
活食
奥拉
优步
聊得好
食用熊猫
多米诺骨牌
点击食物
Smartyo
潮水
网络系列
戈普
现场直播

它起作用了，但是当li中有更多的文本时，它们将倾向于分成两行，将无法正确显示。下一行应该从上一行的相同位置开始。请@Paulie\u D你能帮助我吗？我已经找到了使用文本缩进的解决方案：-70px；对李文来说，这是有效的，但当李文中有更多的文本时，这些文本将倾向于分成两行，将无法正确显示。下一行应从上一行的相同位置开始。你能帮帮我吗？试过了，但不起作用。我已经找到了使用文本缩进的解决方案：-70px；谢谢你的帮助。