使用CSS时，是否只能将:: before和:: after之间的内容定位为目标？

Question

我无权访问JavaScript或HTML，只有CSS。

我正在尝试将已经存在的文本更改为其他内容。

 #element::before { content: "This is the new text." } 

 <div id="element">This is the original text.</div> 

是否可以使用CSS专门定位旧文本，然后应用text-indent: -9999px; ？

Answer 1

不可能专门针对元素的文本节点； 请参阅是否有用于文本节点的CSS选择器？ 欲获得更多信息。

尽管正如Paulie_D所建议的那样，您可以通过多种方式获得想要的效果，但这是否是一个好主意取决于您要实现的目标。

 #element { visibility: hidden; } #element:before { content:"My new text using visibilty."; visibility: visible; } #element2 { font-size: 0; } #element2:before { content:"My new text using font-size."; font-size: 16px; } 

 <div id="element">This is the original text.</div> <div id="element2">This is the original text.</div> 

Answer 2

简短的答案是：不，您不能使用CSS来定位元素内的文本，而与伪元素的内容无关。

但是，您可以通过将伪元素的内容粘贴到原始内容上然后隐藏它来创建解决方案。

注意：此方法使用绝对定位，因此如果伪元素内容过长，可能会产生问题。

更好的方法：一种替代方法是使用visibility属性隐藏元素的主要内容，但使这些内容在伪元素中可见（贷记为Hidden-Hobbes ）。

 #element::before { content: "My new text."; display: block; color: black; position: absolute; background-color: yellow; width: 100%; } #element { color: red; position: relative; } #element-alt::before { content: "My new alt-text."; border: 1px dotted blue; visibility: visible; display: block; } #element-alt { border: 1px dotted gray; margin-top: 30px; visibility: hidden; } 

 <div id="element">This is the original text.</div> <div id="element-alt">This is the original text.</div>