列表编号样式CSS，正确编号，如阿拉伯数字编号系统

Question

我需要制作一个有序列表，数字在右边。像这样的东西：

等等。

而不是正常的方式：

1. 项目
2. 项目
3. 项目

如何使用CSS实现这一目标？

Answer 1

只需在ol标记上应用direction: rtl;，它就会使数字从右边开始。

例如：

.rtl {
  direction: rtl;
}

<ol class="rtl">
  <li>Coffee</li>
  <li>Tea</li>
  <li>Milk</li>
</ol>

Answer 2

使用 CSS Counters 。

.List.A text-align编辑left，其中包含伪类::before且没有内容（“项目”位于::before }。）

.List.B text-align编辑right，其中包含伪类::after且没有内容（“项目”位于::after }。）

.List.C text-align编辑right，其中包含伪类::after并且内容（“item”位于<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评论