仅使用css更改元素中的文本

您好，我想知道是否可以将列表中第六个孩子李的文本更改为一些自定义文本。这是一个用于归档小部件的博客。我想在第六个月说一些类似于往回走的话。我知道如何选择第六个孩子，但我不知道最好的方式来改变文本，总是说更远回来

---

非常感谢您的帮助。

您可以使用：

li:nth-child(6) {
    /* to hide the original text */
    color: transparent;
}

li:nth-child(6)::before {
    content: 'Further back';
    color: #000;
}

但是CSS不能改变实际的文本，因此；它可以显示此文本，但它不在DOM中，也不可被JavaScript访问，也不可供用户选择/交互

如果原始文本被包装在其自己的节点中，例如一个跨距，例如：

<ul>
    <li>One</li>
    <li>Two</li>
    <li>Three</li>
    <li>Four</li>
    <li>Five</li>
    <li><span>Six</span></li>
    <li>Seven</li>
    <li>Eight</li>
</ul>

正如在评论中提到的，我应该解释双冒号：，而不是单冒号：，前缀的用法。在CSS中，这两个元素用于区分伪元素：：before、：：first-line、：：first-letter和伪类：first-child、：hover等。Internet Explorer在版本8中才开始理解/实现伪元素，它只支持使用单冒号选择器，而大多数其他更现代的，浏览器支持这两个版本，因此通常最好咬紧牙关，要么使用：：before/：after etc，要么同时使用：：before，：before{/*css*/}

参考资料：

. .

---

如果您有纯色背景色：

---

你的HTML是什么？你希望文本根据什么来改变？第七个和其他元素会发生什么？不应该被标记下来。他已经指定他使用的是李的，并且他说更改是基于它是第六个李。这并没有删除其他文本不，我知道；但我一直在努力。。。编辑以“隐藏”文本。似乎也隐藏了项目符号。实际上，如果设置了高度并隐藏了溢出，这对我正在尝试的操作非常有效。做得很好！在这种情况下，我很高兴能帮上忙=

li:nth-child(6) span {
    display: none;
}

li:nth-child(6)::before {
    content: 'Further back';
    color: #000;
}

.text {
    color: white;
}

.text:before {
    content: "Another text";
    color: black;
}