html - カスタム、通常、順序付きの箇条書きリスト スタイル

Question

次のようなリスト スタイルが必要です ( jsfiddle ):

ご覧のとおり、リストのスタイルは次のとおりです。

1. CSS によって提供されるスタイルの 1 つではない、つまりカスタムメイドのスタイル
2. <li>規則的です。つまり、 sに 1、2、3 などの値を手動で入力する必要はありません。したがって、 が 4 つある場合<li>、値として 1、2、3、4 を持つ 4 つの緑色の円が自動的に配置されます。

質問：

このタスクを達成するにはどうすればよいですか?

Answer 1

これは、CSS カウンターを使用して自動的に行うことができます。一致するセレクターが DOM で見つかった場合、CSS カウンターがインクリメントされます (インクリメントする量を指定することもできますが、それはこの回答の範囲外です)。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>