Список тегов всегда показывает 0 - PullRequest
Новая
       16

Список тегов всегда показывает 0

0 голосов
/ 02 октября 2019

Я использовал неупорядоченный список с некоторыми стилями CSS. Теперь все элементы списка показывают 0. Я дал свойство list-style как none, потому что я хочу отобразить некоторые конкретные числовые стили. Я что-то пропустил? 

ol.circle li:before {
  margin-right: 10px;
  content: counter(item);
  background: #0971B2;
  border-radius: 100%;
  color: white;
  width: 1.4em;
  text-align: center;
  display: inline-block;
}

ol.circle {
  counter-reset: item;
}

ol {
  list-style: none;
}
<html>
<ol class="circle">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  </ul>

</html>

1 Ответ

1 голос
/ 02 октября 2019

Также необходимо увеличить счетчик для каждого элемента li со свойством counter-increment, а значение - это счетчик, который вы хотите увеличить. 

ul.circle li:before {
  margin-right: 10px;
  content: counter(item);
  background: #0971B2;
  border-radius: 100%;
  color: white;
  width: 1.4em;
  text-align: center;
  display: inline-block;
}

ul.circle {
  counter-reset: item;
}

ul {
  list-style: none;
}

ul li {
  counter-increment: item;
}
<ul class="circle">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
</ul>
...