Showing :before but hiding element with CSS only

Question

I have a document that I can't edit the HTML of (a payment page on Shopify) so for security reasons, they don't allow you to edit this (unfortunately, same as the javascript).

You can however, edit your own css. So this is why it must be css only if possible.

I want to basically replace text via css. I know that this itself isn't possible, but this is how I've managed to do the next best thing:

HTML

<P>This is some nice text here</p>

CSS

p:before{
  content:'This text has replaced the original.';
  visibility:visible;
}

p{
  visibility:hidden;
}

JsFiddle - Codepen (for viewing in IE8/EI9)

For the most part, this works and for now is our preferred method.

However, in IE8/EI9, visibility is not supported. (Source)

I've tried other methods such as:

display:none;

and

opacity:0;

but both of them hide :before.

I have also tried to change the text color to the background color, but we don't like the idea of having the text still on screen if highlighted (I know, beggars can't be choosers).

My question is: Are there alternatives to this approach that work in IE8/EI9?

Thanks.

Answer 1

You could use font-size : http://codepen.io/anon/pen/KuJln

p:before{
  content:'This text has replaced the original.';
  font-size:16px;/* if rem not supported */
  font-size:1rem;
}

p{
  font-size:0.01px;/* 0+ for ie , yep :) */
}

Answer 2

You can change the color.

http://jsfiddle.net/Epte8/1/

If you don't have a solid background, you could use rgba for IE9 to set the transparency of the color, but that is unfortunately not supported in IE8 (I don't think you can set a transparent text color there).