Dynamically Change Text Output With CSS

admin Avatar

So, how awesome is it to know that you can change any text output on your webpage using just CSS? Super awesome right? I know! So let’s get right to it.

First, you may wonder why the need to change an output with CSS. Why not change it from the source? Well, the most obvious reason for me was to avoid making changes to theme code since updating the theme would reverse the change – this is with respect to WordPress by the way.

Here’s the code:

.element {
  text-indent: -9999px;
  line-height: 0; /* Collapse the original line */
}

.element::after {
  content: "New Text";
  text-indent: 0;
  display: block;
  line-height: initial; /* New content takes up original line height */
}

<p class="element">Original Text</p>

You should replace element with your actual HTML element containing the text to be changed. You may also have to tweak some property settings (e.g line-height).

Hope this helps!

Source: https://stackoverflow.com/questions/7896402/how-can-i-replace-text-with-css
Demo: http://jsfiddle.net/jvandyke/U52Tt/

Tagged in :

admin Avatar

Leave a Reply

Your email address will not be published. Required fields are marked *

More Articles & Posts