多行列表项与自定义计数器的有序列表缩进布局问题

我有一个包含自定义计数器、多行列表项且列表项带有背景的有序列表，现有代码如下：

原有CSS代码 #

ol {
  list-style-type: none;
  width: 400px;
}

ol li {
  counter-increment: step-counter;
  background: #eee;
  margin-top: 20px;
  padding: 10px;
}

ol li::before {
  content: counter(step-counter);
  background: orange;
  padding: 8px;
  border-radius: 9999px;
}

原有HTML代码 #

<ol>
  <li>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  </li>
  <li>
  Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
  </li>
</ol>

当前计数器位于列表项内部，我希望计数器位于列表项左侧，即首行左侧，后续行与首行起始位置对齐。尝试过给li设置display: table-row、li::before设置display: table-cell，但该方法会破坏列表项的背景效果，请问如何调整才能让计数器显示在整个列表项的旁边？

给你两种可行的方案，都能实现需求且不会破坏列表项的背景：

方案一：Flex布局（推荐） #

把列表项设为flex容器，让计数器作为独立的flex项，既能保证计数器在左侧、文本自动对齐，还能保留完整的背景样式：

ol {
  list-style-type: none;
  width: 400px;
  padding-left: 0; /* 清除ol默认的左侧内边距 */
}

ol li {
  counter-increment: step-counter;
  background: #eee;
  margin-top: 20px;
  padding: 10px;
  display: flex; /* 启用flex布局 */
  align-items: flex-start; /* 让计数器和文本顶部对齐 */
  gap: 10px; /* 计数器和文本之间留间距，可按需调整 */
}

ol li::before {
  content: counter(step-counter);
  background: orange;
  padding: 8px;
  border-radius: 9999px;
  flex-shrink: 0; /* 防止计数器被压缩变形 */
  width: 24px; /* 固定宽度，保证圆形计数器整齐 */
  text-align: center;
}

方案二：相对定位+伪元素绝对定位 #

通过定位方式把计数器固定在列表项左侧，同时给列表项左侧留足够内边距让文本避开计数器区域，背景样式不受影响：

ol {
  list-style-type: none;
  width: 400px;
  padding-left: 0; /* 清除ol默认内边距 */
}

ol li {
  counter-increment: step-counter;
  background: #eee;
  margin-top: 20px;
  padding: 10px 10px 10px 50px; /* 左侧留足够空间放计数器 */
  position: relative; /* 作为伪元素的定位容器 */
}

ol li::before {
  content: counter(step-counter);
  background: orange;
  padding: 8px;
  border-radius: 9999px;
  position: absolute;
  left: 10px; /* 计数器距离列表项左侧的间距 */
  top: 10px; /* 计数器距离列表项顶部的间距，和li的padding-top一致 */
  width: 24px;
  text-align: center;
}

内容的提问来源于stack exchange，提问作者ATW