Question

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

我设法实现了这一点，但是当数字变为两位数（从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

如何在订购列表中的自定义编号旁边正确放置自定义点？

1 个答案: