Replacing text with CSS that works in IE7

Question

I am using the following script to replace "Names" text filed with "Your Name" but the problem is this solution does not work in IE7 and instead of "Names" on "Your Name" there is a blank area. Is there a way to make this work with IE7?

<style>

.info{
    visibility: hidden;
    position: relative;

}

.info:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "Your Name";
}

</style>

possible duplicate of [:after and :before css pseudo elements hack for IE 7](http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7) — Richard Ev, Dec 01 '14 at 01:41
I tried this solution http://stackoverflow.com/questions/4181884/after-and-before-css-pseudo-elements-hack-for-ie-7 but the original text still shows — Parlanchina, Dec 01 '14 at 01:42
[CSS Generated content for pseudo-elements](http://caniuse.com/#feat=css-gencontent) is not supported for IE7. — Axel, Dec 01 '14 at 02:30
Don't use `::before` for user-meaningful content. Would you use a fork to pound in a nail because you are more familiar with the fork than the hammer? — , Dec 01 '14 at 06:25

score 0 · Accepted Answer · answered Dec 01 '14 at 03:11

The :before and :after psuedo-elements are not supported back in IE7. However, You can do you idea back through version 8.

I understand that you're not fluent in JavaScript, but it can be done easily, and it's supported waaaaaayyyyy back. In this example, JavaScript automatically replaces "Name" with "Your Name":

document.getElementById('name1Label').innerHTML = document.getElementById('name1Label').innerHTML.replace("Name", "Your Name");
// the one line above can replace any text.
// change the value 'document.getElementById' brackets to target a different element.

<label for="name1" id="name1Label">Name: <input type="text" name="name1" id="name1"/></label>

Replacing text with CSS that works in IE7

1 Answers1