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:
<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.
Please Login to comment...