How can I replace the text in an
from a CSS file without using a 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.

CSS alone can't absolutely change/alter your DOM structure. Their purpose is to just give a style to a document — Fabrizio Calderan, Nov 12 '14 at 14:02
Okay, so that's what you *have*. Now, what - *exactly* - do you want to *do* with it? — David Thomas, Nov 12 '14 at 14:04
It might be an interesting exercise, but using CSS to change document content is not supercool; it is for most uses and purposes just pointlessly risky. — Jukka K. Korpela, Nov 12 '14 at 14:07
Possible [duplicate](http://stackoverflow.com/questions/7896402/how-can-i-replace-text-through-css) — Benjamin, Nov 12 '14 at 14:22

score 10 · Accepted Answer · answered Nov 12 '14 at 14:15

10

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

answered Nov 12 '14 at 14:15

G-Cyrillus

101,410
14
105
129

This solution is nicer than mine. :) i didnt see i can use text-indent 0 to get the after text back – Der Vampyr Nov 12 '14 at 14:21
@DerVampyr just a different approach , it works because of the float :) (the layout thingy bob ..) – G-Cyrillus Nov 12 '14 at 14:27
Nowadays its better not to use float :) – Der Vampyr Nov 12 '14 at 14:34
@DerVampyr , this is why i tell the layout reason, the good practice is the good reason ;) ... – G-Cyrillus Nov 12 '14 at 17:43

score 2 · Answer 2 · answered Nov 12 '14 at 14:12

It's possible to change your content, but it's actually not the common way to do it through CSS. I think the goal was just to style up your HTML with some CSS. But here is a Snippet which adds Question: before your text in <h1> tag.

.container h1:before {
  content: "Question: ";
}

<div class="container">
  <h1>Is the makerspace door open?</h1>
</div>

score 1 · Answer 3 · answered Nov 12 '14 at 14:12

Did i get it right, that you want to replace the text in the 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;
}

score 1 · Answer 4 · answered Nov 12 '14 at 14:18

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

FIDDLE

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

from a CSS file without using a tag?

4 Answers4

Linked

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

from a CSS file without using a tag?

4 Answers4

Linked

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