Gewohnheit, regelmäßige, geordnete Aufzählungsstil

Question

Ich möchte eine Liste Stil wie folgt aus (jsfiddle):

Wie Sie sehen können, ist die Liste Stil ist:

1. nicht einer von die Stile von CSS zur Verfügung gestellt, dh eine benutzerdefinierte Stil
2. ist regelmäßig, dh ich muss nicht manuell Werte 1, 2, 3, etc. für die <li> s. Also, wenn ich vier <li> s habe, wird es automatisch vier grüne Kreise mit 1,2,3,4 als die Werte setzen.

Frage:

Wie erreiche ich diese Aufgabe?

Answer 1

Sie können dies automatisch mit CSS-Zählern tun. CSS-Zähler werden inkrementiert, wenn ein passender Selektor im DOM gefunden wird (wir können angeben, um wie viel Sie auch erhöhen möchten, aber das ist für diese Antwort nicht möglich). Dann kann der Wert des Zählers auf die content Eigenschaft eines Pseudo-Elements gesetzt werden.

ul { 
 
    counter-reset: li-counter; 
 
    list-style-type: none; 
 
} 
 
li { 
 
    counter-increment: li-counter; 
 
    margin: 10px; 
 
} 
 
li:before { 
 
    display: inline-block; 
 
    content: counter(li-counter); 
 
    height: 30px; 
 
    width: 30px; 
 
    border-radius: 50%; 
 
    background: #20ED89; 
 
    color: white; 
 
    text-align: center; 
 
    line-height: 30px; 
 
    margin: 10px; 
 
}

<ul> 
 
    <li>Content</li> 
 
    <li>Content</li> 
 
    <li>Content</li> 
 
    <li>Content</li> 
 
    <li>Content</li> 
 
    <li>Content</li> 
 
    <li>Content</li> 
 
    <li>Content</li> 
 
</ul>