For The Love Of CSS Tip 1: Dynamically Change Text Output With CSS

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:

CSS

.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 */
}

HTML

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

Note:

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! Feel free to leave your thoughts or questions in the comments section or contact us.

References:

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


Leave a Reply

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

Open chat
1
Have a question?
Hello, welcome to SiteStars! Do you have a question about our services and/or products? Chat with Alex now ...