Erhöhen Sie den Abstand zwischen geordneten Listennummern und Listenelementtext ⇐ CSS

[Anonymous]

Ich habe einen Beispiel-Codepen (https://codepen.io/jon424/pen/YzeBdGK?editors=1100), in dem ich versuche, eine benutzerdefinierte Nummerierung für geordnete Listen zu verwenden. Das Problem tritt auf, wenn der Text für li in die nächste Zeile umbricht. Wenn dies geschieht (siehe mein Listenelement Nummer 3 im Beispiel), wird der Text vertikal an der geordneten Listennummer ausgerichtet. Ich möchte einen Abstand zwischen der Zahl und dem gesamten Inhalt für den Zeilenumbruchtext haben, damit die Nummer der geordneten Liste beim Umbrechen nicht in derselben vertikalen Ausrichtung wie der Zeileninhalt liegt. Ich möchte versuchen, dies nur mit ol- und li-Tags beizubehalten und ein span zu vermeiden, und suche nach Vorschlägen.
Es gibt eine ähnliche Frage zu SO bezüglich der Beibehaltung des Einzugs für die zweite Zeile einer geordneten Liste, aber nachdem ich diesen Ansatz untersucht habe, bin ich immer noch verwirrt, wie ich meine Listennummernstile konsistent halten und gleichzeitig den Abstand zwischen den Zahlen und dem Text berücksichtigen kann. Derzeit beim Ausprobieren des

Code: Select all

table-layout

Ansatz, der Randradius um das Listenelement wird auch durch die Anzeige beeinflusst, wodurch die Kreise um die Zahlen je nach Inhalt des Listenelements unterschiedliche Größen haben.
Jede Eingabe ist sehr willkommen.

Code: Select all

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

Code: Select all

[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]