Replace text of an HTML element using CSS pseudo-classes ::before and ::after

I was working on a donate form recently. The code that created and managed the cart was a library that couldn’t be easily changed. But I needed to customize some of the labels. So I used CSS pseudo classes.

There are two ways I ended up doing it. The first is the cleanest, but only works if the text you want to replace is in a wrapper than can be hidden:

<style>
.hide {display:none;}
#relpacement::after {display:block; content:"This is the NEW text"}
</style>

<div id="replacement"><span class="hide">This is the old text</span></div>

 But if you don't have the luxury of wrapping the item, you need to get a bit more creative. Other sites out there talk about using visibility, but I find it doesn't work in IE. So I ended up doing this:

<style>
#replacement {font-size:0; padding:0; background:none; }
#replacement::after {font-size:14px; content:"This is the NEW text"}
</style>

<div id="replacement">This is the old text</div>