Как правильно разместить свою точку рядом с моим номером в упорядоченном списке?

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

Нет необходимости использовать псевдоэлемент после: измените ::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;
        }

    }
}

Таким образом, положение точки всегда будет следовать за числом, независимо от того, сколько у вас цифр.

Вилка для кодепа