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

无法专门定位元素的文本节点;有关详细信息，请参阅Is there a CSS selector for text nodes?。

你可以通过各种方式达到你想要的效果，尽管Paulie_D建议，这是否是一个好主意取决于你想要达到的目标。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

Answer 2

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

但是，您可以通过将伪元素的内容粘贴到原始元素上来创建解决方法内容因而隐藏起来。

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

更好的方法：另一种方法是使用visibility属性隐藏主要内容元素，但使伪元素的内容可见（信用Hidden-Hobbes）。

＆＃13;

#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;
}

＆＃13;

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

＆＃13;

是否可以仅在使用CSS之前的:: before和::之后定位内容？

2 个答案: