html - List Numbering style CSS, Right Numbering like Arabic Numbering 系统

Question

<分区>

Answer 1

使用 CSS Counters 。

.List.A 是 text-align编辑left使用伪类 ::before并且没有内容(“元素”在 ::before 中。)

.List.B 是 text-align编辑right使用伪类 ::after并且没有内容(“元素”在 ::after 中。)

.List.C 是 text-align编辑right使用伪类 ::after并且有内容(“元素”在 <li> 中。)⭐

---

演示

---

ol {
  outline: 1px dashed red;
}

li {
  outline: 1px solid blue
}

.list {
  counter-reset: number;
  list-style-type: none;
}


/* The "\a0" is a space */

.list.A li::before {
  counter-increment: number;
  content: "Item\a0\a0."counter(number)"\a0";
}

.list.B li,
.list.C li {
  text-align: right;
}

.list.B li::after {
  counter-increment: number;
  content: "Item\a0\a0."counter(number)"\a0";
}

.list.C li::after {
  counter-increment: number;
  content: "\a0\a0."counter(number)"\a0";
}

<ol class='list A'>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

<ol class='list B'>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
  <li></li>
</ol>

<ol class='list C'>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
  <li>Item</li>
</ol>

---

⭐ 根据 Temani Afif 的评论