css - 如何在有序列表中正确地将我的自定义点放在我的自定义编号旁边？

Question

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

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

知道如何解决这个问题吗？

CSS:

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 {
            position: absolute;
            content: '.';
            left: 12px;
            color: green;
            font-weight: bold;
        }
    }
}

Here's my code in a pen .

Answer 1

无需使用 after 伪元素:像这样更改 ::before，在 content

末尾添加点

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;
        }

    }
}

这样，无论您有多少位数字，点的位置将始终跟在数字后面。

Codepen fork