Open In App

How to replace text with CSS?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
Report

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. The multiple approaches to do so are as:

Using :after Pseudo-element

The ‘: after’ pseudo-element in CSS is utilized to insert additional content after the selected element, enabling techniques such as text replacement or the addition of decorative elements.

Approach:

  • To start with, we wrap the text and assign it to 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: Implementation to replace text using :after Pseudo-element

html




<html>
 
<head>
    <title>
        Using :after Pseudo-element
    </title>
    <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>


Output:

Screenshot-2024-01-17-154234

Using Pseudo-elements & CSS Visibility

This approach utilizes pseudo-elements and CSS visibility to achieve text replacement. The original text is hidden using a hidden span, and the replacement text is added using the :after’ pseudo-element.

Approach:

  • Wrap the original text within a <span> element, serving as a child of the <p> element with the class .toBeReplaced.
  • Apply display: none; to the <span> element, ensuring the original text is hidden from view.
  • Utilize the :after pseudo-element on the .toBeReplaced class to insert content that replaces the hidden text.
.toBeReplaced span {
display: none;
}
.toBeReplaced:after {
content: "This text replaces the original.";
}

Example: Implementation to replace text using aabove approach.

html




<html>
 
<head>
    <title>
        Using Pseudo-elements & CSS Visibility
    </title>
    <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>


Output:

Screenshot-2024-01-17-154234

CSS is the foundation of webpages, is used for webpage development by styling websites and web apps.You can learn CSS from the ground up by following this CSS Tutorial and CSS Examples.



Last Updated : 24 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads