阅读更多：CSS 教程

使用 :before 伪元素添加自定义文本

CSS 伪元素 :before 可以用于在一个元素之前插入一些内容。利用这个特性，我们可以向有序列表的每个列表项添加自定义文本。

下面的例子演示了如何将自定义文本添加到有序列表的每个列表项中：

<ol>
  <li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ol>

ol li:before {
  content: "编号";
}

上面的代码将在每个列表项之前添加文本”编号”。结果如下所示：

1. 编号苹果
2. 编号香蕉
3. 编号橙子

注意，我们使用 CSS 伪类 ol li:before 来选择每个列表项的 before 伪元素，并使用 content 属性指定要插入的文本。

使用 :after 伪元素添加自定义文本和样式

除了使用 :before 伪元素，在有序列表的每个列表项中使用 :after 伪元素也可以实现相同的效果。通过使用 :after 伪元素，我们可以在列表项后面添加自定义文本和样式。

下面的例子演示了如何在有序列表的每个列表项后添加自定义文本和样式：

<ol>
<li>苹果</li>
  <li>香蕉</li>
  <li>橙子</li>
</ol>

ol li:after {
  content: " (水果)";
  color: red;
  font-style: italic;
}

上面的代码将在每个列表项之后添加文本 “(水果)”，并将其设置为红色并斜体显示。结果如下所示：

1. 苹果 (水果)
2. 香蕉 (水果)
3. 橙子 (水果)

同样，我们使用 CSS 伪类 ol li:after 来选择每个列表项的 after 伪元素，并使用 content 属性指定要插入的文本和 color、font-style等属性来设置文本的样式。

使用自定义属性添加文本

另一种向有序列表的列表项中添加自定义文本的方法是使用自定义属性。自定义属性是指我们自行定义的HTML属性，可以用于存储额外的数据或信息。

下面的例子演示了如何使用自定义属性向有序列表的列表项添加自定义文本：

<ol>
<li data-text="苹果">1</li>
  <li data-text="香蕉">2</li>
  <li data-text="橙子">3</li>
</ol>

ol li:before {
  content: attr(data-text);
}

上面的代码使用 data-text 自定义属性存储了要插入的文本，然后通过 CSS 伪元素 before 和 content 属性，将其添加到每个列表项之前。

结果如下所示：

1. 苹果
2. 香蕉
3. 橙子

在这个例子中，我们使用 CSS 伪类 ol li:before 和 attr(data-text) 来选择每个列表项的 before 伪元素，并使用 content 属性加上 attr() 函数来获取自定义属性中的文本。

总结

通过使用CSS的伪元素和自定义属性，我们可以轻松向有序列表的列表项中添加自定义文本，并可以灵活地进行样式设置。这些方法为我们提供了更多的自定义能力，使列表展示更加丰富与个性化。

无论是使用 :before 伪元素，还是 :after 伪元素，或者是自定义属性，我们都可以根据具体的需求选择合适的方法来添加自定义文本。希望本文对你在CSS中向有序列表的列表项中添加自定义文本有所帮助！