丸番号付きのリストをCSSで実現する

Created:

1. このページの目的

丸番号付きのリストをCSSで実現する。

web.dev サイトにあったのを真似る。

2. デモ

独自ナンバリング付きリスト

  1. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  2. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  3. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  4. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  5. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  6. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  7. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  8. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  9. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  10. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  11. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  12. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  13. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  14. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  15. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  16. Lorem Ipsum is simply dummy text of the printing and typesetting industry.

普通のリスト

  1. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  2. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  3. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  4. Lorem Ipsum is simply dummy text of the printing and typesetting industry.
  5. Lorem Ipsum is simply dummy text of the printing and typesetting industry.

3. コード

HTML

<ol class="deco">
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
  <li>Lorem Ipsum is simply dummy text of the printing and typesetting industry.</li>
  ...[snip]...

CSS

ol.deco,
ol.deco li {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
ol.deco {
  counter-reset: ol-step-counter;
  list-style: none;
  padding-left: 32px;
  margin: 32px 0 32px 14px;
  position: relative;
}
ol.deco>li {
  margin-bottom: 8px;
  counter-increment: ol-step-counter;
}
ol.deco>li::before {
  position: absolute;
  left: 0;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  content: counter(ol-step-counter);
  font-size: .75em;
  height: 20px;
  justify-content: center;
  margin: 0;
  width: 20px;
  background: #5f6368;
  border-radius: 50%;
  color: #fff;
}

4. 参考