Translating text with CSS

Sometimes you need to make a short bit of text bilingual, and you can't directly change the text itself. For example, content automatically generated by a 3rd party service may be hard coded in English. But if you can modify the CSS, you can add translations to text.

Ideally, the person hardcoding the English will have been nice enough to give it a unique id or class, like this:

<h3 class="enter">Enter</h3>

With the :after pseudo class and your translated content applied...

h3.enter:after {content:"  |  Entrez"}

...you will get this:

Enter | Entrez

:after is supported by all modern browsers, but won't work in IE7 and earlier.