如何在不使用<span>标记的情况下从CSS文件中替换<h1>中的文本？

Question

这是发生的事情:

对于我的计算机科学课,我们正在开发一个只能修改CSS的项目.我认为在插入我的CSS文件时更改元素的内容会非常酷.由于我无法添加标签,我不知道我怎么能这样做.这就是我所拥有的:

<div>

  <h1>Is the makerspace door open?</h1>

</div>

<div>


  <p id="switch_txt">Checking...</p>

</div>


</body>

---

我尝试使用:: before和::之后的伪选择器,但这些选择器不能在content属性中放置元素.任何建议将不胜感激.

Answer 1

伪元素是直观替换文本或插入图像的好方法.

text-indent可以有用地添加到浮动上下文中,以便伪元素隐藏任何dom内联或内联块内容(例如文本或图像).

例:

HTML测试

<h1>show me something else</h1>

CSS测试

h1 {
  text-indent:-9999px;
}
h1:before {
  text-indent:0;
  content:'Here is something else !';
  float:left;
}