如何在訂購列表中的自定義編號旁邊正確放置自定義點？

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

這是我用筆寫的代碼 。

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叉