How to replace text with CSS? - GeeksforGeeks

30 Jul, 2021
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:
<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>
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;
}

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

Example:
<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>
Output:
This text replaces the original.
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.
17211a0482
CSS-Misc
Picked
CSS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
How to apply style to parent if it has child with CSS?
How to set space between the flexbox ?
Design a web page using HTML and CSS
Create a Responsive Navbar using ReactJS
Form validation using jQuery
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
Difference between var, let and const keywords in JavaScript