How can I replace text in <h1> from CSS file without using <span> tag?
Here's what's going on:
For my computer science class, we are working on a project where we can only modify the CSS. I think it would be great to change the content of the elements when including my CSS file. Since I cannot add a tag, I do not know how else I can 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 tried to use :: before and :: after the pseudo selectors, but these selectors cannot place elements in the content property. Any advice would be much appreciated.
source to share
A pseudo-element is a good approach to visually replacing text or inserting an image.
text-indent can be useful in a float context for a pseudo-element to hide any internal or inline dom content (like text or image).
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;
}
source to share
It is possible to change your content, but this is actually not the usual way to do it with CSS. I think the goal was just to create HTML using CSS. But here is the snippet that adds Question:
before the text in the tag <h1>
.
.container h1:before {
content: "Question: ";
}
<div class="container">
<h1>Is the makerspace door open?</h1>
</div>
source to share
Did I understand correctly that you want to replace the text in h1?
Try this approach.
HTML:
<h1>Is the makerspace door open?</h1>
CSS
h1:after {
content: "test";
left: -95px;
position: absolute;
top: 5px;
}
h1 {
height: 20px;
line-height: 25px;
margin: 0;
overflow: hidden;
padding: 0;
text-indent: 105px;
width: 100px;
}
source to share
How about this
<div>
<h1>Is the makerspace door open?</h1>
</div>
<div>
<p id="switch_txt">Checking...</p>
</div>
CSS
* {
margin: 0;
padding: 0;
}
h1 {
content:"";
position: absolute;
visibility: hidden;
left: 0;
top:0;
}
h1:after {
float: left;
content:"Ultra Cool";
visibility: visible;
}
#switch_txt {
position: relative;
top: 50px;
}
source to share