うさぎのメモ帳

counter-increment を使って li に連番をつける

2019年09月23日 - 2019年10月08日

html

<ul class="list">
  <li class="list_item">World</li>
  <li class="list_item">is</li>
  <li class="list_item">Mine</li>
</ul>

css

.list_item {
  counter-increment: item;
}

.list_item::before {
  content: counter(item);
  content: '<'counter(item)'>';
}