如何用CSS实现右侧显示阿拉伯数字编号的有序列表？

嘿，这个需求用 CSS 计数器配合伪元素就能轻松搞定，完全不用改动 HTML 结构，灵活度拉满！下面给你详细的实现方案：

核心实现代码 #

首先是 HTML 部分，就用最普通的有序列表就行，不需要做任何额外修改：

<ol class="right-numbered">
  <li>第一个列表项，内容可以写很长，测试下编号会不会和文本重叠</li>
  <li>第二个列表项，试试短文本的对齐效果</li>
  <li>第三个列表项，多行文本的情况也能完美适配哦</li>
</ol>

然后是关键的 CSS 代码，这部分是实现右侧编号的核心：

/* 初始化计数器并重置列表默认样式 */
.right-numbered {
  list-style: none; /* 隐藏默认的左侧编号 */
  counter-reset: item-counter; /* 创建一个名为item-counter的计数器并重置 */
  padding-left: 0; /* 去掉默认内边距，避免多余空白 */
}

/* 为每个列表项设置基础样式并递增计数器 */
.right-numbered li {
  counter-increment: item-counter; /* 每一个列表项都让计数器+1 */
  position: relative; /* 为伪元素的绝对定位提供参考容器 */
  padding-right: 30px; /* 右侧留出足够空间放编号，防止文本和编号重叠 */
  margin-bottom: 8px; /* 列表项之间增加间距，视觉更舒适 */
}

/* 用伪元素生成右侧的编号 */
.right-numbered li::after {
  content: counter(item-counter); /* 显示计数器的当前数值 */
  position: absolute;
  right: 0; /* 定位到列表项的最右侧 */
  top: 0; /* 和文本顶部对齐 */
  color: #666; /* 自定义编号颜色，和正文区分开 */
  font-weight: normal; /* 调整编号字体粗细，按需修改 */
}

可选优化方案 #

如果想要更个性化的编号样式，比如带点、括号，或者调整对齐方式，只需要修改伪元素的属性就行：

/* 给编号加上点，比如 1.、2. */
.right-numbered li::after {
  content: counter(item-counter) ".";
}

/* 给编号加上括号，比如 (1)、(2) */
.right-numbered li::after {
  content: "(" counter(item-counter) ")";
}

/* 让编号和文本底部对齐（适合多行文本场景） */
.right-numbered li::after {
  top: auto;
  bottom: 0;
}

原理简单说明 #

我们先隐藏了有序列表默认的左侧编号，然后用 CSS 计数器来追踪列表项的序号，最后通过 ::after 伪元素把计数器的值插入到列表项右侧，再用绝对定位固定位置，同时给列表项设置右侧内边距，确保文本不会和编号重叠。整个过程完全基于 CSS，HTML 结构保持干净简洁。

内容的提问来源于stack exchange，提问作者sc0rp10n.my7h