对li元素进行以下设置：

• margin: 0 0 0.5rem 0;: 设置列表项之间的间距。
• counter-increment: count;: 每遇到一个
• 元素，count计数器的值就会增加1。
• position: relative;: 这是实现正确缩进和定位的关键。它为内部的::before伪元素提供了一个定位上下文，使其可以相对于
• 进行绝对定位。

ol li {
  margin: 0 0 0.5rem 0; /* 列表项间距 */
  counter-increment: count; /* 递增计数器 */
  position: relative; /* 为::before提供定位上下文 */
}

2.3 自定义数字标记（::before）样式

::before伪元素是创建彩色圆形数字的核心：

• content: counter(count);: 显示当前count计数器的值，即列表项的序号。
• color: #fff;: 数字颜色设为白色。
• font-size: .8rem; font-weight: bold;: 设置数字的字体大小和粗细。
• position: absolute;: 使数字标记脱离文档流，可以精确地定位。
• --size: 23px;: 定义一个CSS变量--size来控制圆圈的大小，方便后续调整。
• left: calc(-1 * var(--size) - 10px);: 这是定位数字标记的关键。它将数字标记放置在
• 元素的左侧，通过计算确保其位于ol的padding-left所留出的空间内。calc()函数允许我们根据圆圈大小动态调整位置。
• line-height: var(--size);: 使数字垂直居中于圆圈内。
• width: var(--size); height: var(--size);: 设置圆圈的宽度和高度。
• background: #a1a;: 设置圆圈的背景色。
• border-radius: 50%;: 将背景形状变为圆形。
• text-align: center;: 使数字水平居中于圆圈内。

ol li::before {
  content: counter(count); /* 显示计数器值 */
  color: #fff; /* 数字颜色 */
  font-size: .8rem; /* 数字大小 */
  font-weight: bold; /* 数字粗细 */
  position: absolute; /* 绝对定位 */
  --size: 23px; /* 定义圆圈大小变量 */
  left: calc(-1 * var(--size) - 10px); /* 精确计算左侧定位 */
  line-height: var(--size); /* 垂直居中数字 */
  width: var(--size); /* 圆圈宽度 */
  height: var(--size); /* 圆圈高度 */
  background: #a1a; /* 圆圈背景色 */
  border-radius: 50%; /* 圆形 */
  text-align: center; /* 水平居中数字 */
}

3. 完整示例代码

将上述CSS和HTML结合，即可实现所需效果：

自定义有序列表教程

以下是一个使用CSS计数器和绝对定位实现的自定义有序列表示例。注意观察数字标记的样式、长文本的自动缩进以及标签的正常显示。



  
这是第一个列表项，内容相对较短。
  
第二个列表项，我们在此处使用了 加粗文本 来强调一些关键信息。
  
第三个列表项，内容较长，将展示自动换行和正确缩进的效果。请注意，即使文本很长，第二行也会与第一行对齐，而不是跑到数字标记下方。
  
第四个列表项，再次使用 重要的加粗内容，以确认此方法对语义化标签的良好兼容性。
  
最后一个列表项，确保所有设置都已完成，并且 功能正常。

4. 效果演示