如何为列表中的项目添加背景颜色

我有一个有序列表

<ol>
<li class="odd">Lorem ipsum dolor sit amet, consectetur ...</li>
<li class="even">Some more text</li>
</ol>

看起来像这样：

1. Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。 Ut enim ad minim veniam, quis
2. 更多文字

我希望列表具有 list-position: 外部，以便数字悬垂（就像在本页上所做的那样），但每个列表项的背景（交替）也覆盖数字。

正如“外部”名称所暗示的那样，数字放置在元素外部，因此您无法使用 li 的背景颜色影响它们。解决此问题的方法可能是在 li 中使用额外的 div：

<ol>
<li><div>Lorem ipsum dolor sit amet, consectetur ...</div></li>
<li><div>Some more text ...</div></li>
</ol>

然后为 div 添加以下 CSS：

ol li div  {
  width: 100%;
  height: 100%;
  background-color: #FFAAAA;
  margin-left: -20px;
  padding-left: 20px;
}

这会将 div 移至数字下方（即 -20px 值），并将其中的文本移回正确位置（即 20px 值）。