на заказ, правильные, упорядоченная пуля списка стили

Question

Я хочу стиль списка, как это (jsfiddle):

Как вы можете видеть, стиль списка:

1. не один из стили, предоставленные CSS, то есть пользовательский стиль
2. является обычным, то есть мне не нужно вручную ставить значения 1, 2, 3 и т. д. для <li>. Итак, если у меня есть четыре <li> s, он автоматически поместит четыре зеленых круга с 1,2,3,4 в качестве значений.

Вопрос:

Как решить эту задачу?

Answer 1

Вы можете сделать это автоматически, используя счетчики CSS. Счетчики CSS увеличиваются, когда в DOM обнаружен соответствующий селектор (мы можем указать, на сколько увеличить, но это вне области действия для этого ответа). Тогда значение счетчика может быть установлено в свойство content псевдоэлемента.

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>