Css 如何在有序列表中正确地将自定义点放置在自定义编号旁边？

在一个有序列表中，我被要求以不同的颜色显示数字作为列表项，并在数字旁边添加一个点

我设法做到了这一点，但当数字变成2位数（从10开始）时，圆点的位置不正确

知道怎么解决吗

CSS:

---

.

无需使用after伪元素：像这样更改

：：before

，方法是在

内容的末尾添加点

ol {
    list-style: none;
    counter-reset: item;

    li {
        position: relative;

        &::before {
            content: counter(item) ".";
            counter-increment: item;
            color: green;
            display: inline-block;
            width: 1em;
            font-weight: bold;
            margin-right: 0.5rem;
        }

    }
}

这样，点的位置将始终跟随数字，无论您有多少位数字

---

无需使用after伪元素：像这样更改

：：before

，方法是在

内容的末尾添加点

ol {
    list-style: none;
    counter-reset: item;

    li {
        position: relative;

        &::before {
            content: counter(item) ".";
            counter-increment: item;
            color: green;
            display: inline-block;
            width: 1em;
            font-weight: bold;
            margin-right: 0.5rem;
        }

    }
}

这样，点的位置将始终跟随数字，无论您有多少位数字