How can I replace the text in an <h1> from a CSS file without using a <span> tag?

Question

Here's what happening:

For my computer science class we're working on a project where we can only modify the CSS. I think it'd be super cool to change the content of the elements when you plug in my CSS file. Since I can't add a tag, I dont know how else can I do this. Here's what I have:

<div>

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

</div>

<div>


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

</div>


</body>

---

I've tried using ::before and ::after pseudo selectors but these selectors can't place elements in the content property. Any advice would be much appreciated.

Answer 1

The pseudo element is a good approach to visually replace text or insert an image.

text-indent can be useful added to a float context for the pseudo element to hide any dom inline or inline-block content(such as text or image).

Example:

HTML test

<h1>show me something else</h1>

CSS test

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