Увеличьте пространство между номерами упорядоченного списка и текстом элемента списка. ⇐ CSS

[Anonymous]

У меня есть пример кода (https://codepen.io/jon424/pen/YzeBdGK?editors=1100), в котором я пытаюсь использовать собственную нумерацию для упорядоченных списков. Проблема возникает, когда текст li переносится на следующую строку. Когда это происходит (см. в примере номер 3 моего списка), текст выравнивается по вертикали с упорядоченным номером списка. Я хотел бы иметь поле между числом и всем содержимым для текста-обертки li, чтобы номер упорядоченного списка не находился в том же вертикальном выравнивании, что и содержимое li при его переносе. Я хотел бы попытаться сохранить это только с помощью тегов ol и li, избегая пробелов, и ищу предложения.
В SO есть аналогичный вопрос относительно сохранения отступа для второй строки упорядоченного списка, но после исследования этого подхода я все еще озадачен тем, как сохранить единообразие стилей номеров в списке, сохраняя при этом расстояние между числами и текстом. В настоящее время при попытке

Код: Выделить всё

table-layout

, радиус границы вокруг элемента списка также зависит от отображения, в результате чего круги вокруг чисел имеют разные размеры в зависимости от содержимого элемента списка..
Любые вводные данные очень приветствуются.

Код: Выделить всё

ol {
list-style: none;
counter-reset: counter-function;
}

li {
counter-increment: counter-function;
margin: 0.25rem;
}

li::before {
content: counter(counter-function);
background: red;
width: 2rem;
height: 2rem;
border-radius: 50%;
display: inline-block;
line-height: 2rem;
color: white;
text-align: center;
margin-right: 0.5rem;
}

Код: Выделить всё

[list]
[*]List item
[*]List item
[*]Longer List item Longer List item Longer List item Longer List item Longer List item Longer List item Longer List item Longer List item Longer List item Longer List item Longer List item Longer List item
[*]List item
[*]List item
[/list]

Подробнее здесь: https://stackoverflow.com/questions/726 ... -item-text