How to replace text with CSS?

Replacing a text is mostly worked out on the server side. But in some circumstances, where we don’t have control over the server, or we are working under restrictions, replacing text using CSS may be a choice.

Method 1: Using Pseudo Elements and Visibility Modifier with Absolute Positioning
To start with, we wrap the text and assign it a class. This method requires very little markup.

<p class="toBeReplaced">Old Text</p>

The text “Old Text” needs to be hidden first and a new text has to be positioned exactly where the old text was. To do so, we change the visibility of this text using CSS to hidden first.

.toBeReplaced {
    visibility: hidden;
    position: relative;
}

Then we add a new text at the exact same position, using the pseudo elements and corresponding explicit positioning.

.toBeReplaced:after {
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
    content: "This text replaces the original.";
}

Note that after is the pseudo element in use here. We use the visibility modifier once again to show the new text. The content attribute contains the new text.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <style>
        .toBeReplaced {
            visibility: hidden;
            position: relative;
        }
        .toBeReplaced:after {
            visibility: visible;
            position: absolute;
            top: 0;
            left: 0;
            content: "This text replaces the original.";
        }
    </style>
</head>
  
<body>
    <p class="toBeReplaced">Old Text</p>
</body>
  
</html>

chevron_right


Output:

This text replaces the original.

Method 2: Using Pseudo Elements and Visibility Modifier with <span> tag
In this method, we need a little bit more markup but we no longer need to specify any absolute positioning for our new text. We wrap the text using <span> tags.

<p class="toBeReplaced"><span>Old Text</span></p>

In this method, we use a child element to wrap the text, that is, the text is now inside <p> and <span> tags. So we can use the display: none CSS attribute to hide the text in the <span> element. Then we can simply replace the text as we did in the previous method, without specifying any positioning.

.toBeReplaced span {
    display: none;
}

.replaced:after {
    content: "This text replaces the original.";
}

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<html>
  
<head>
    <style>
        .toBeReplaced span {
            display: none;
        }
        .toBeReplaced:after {
            content: "This text replaces the original.";
        }
    </style>
</head>
  
<body>
    <p class="toBeReplaced"><span>Old Text</span></p>
</body>
  
</html>

chevron_right


Output:

This text replaces the original.


My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.