How to Add a Gradient Overlay to Text with CSS?

How to replace text with CSS?

Last Updated : 07 May, 2025

Replacing text is usually done on the server side, but in restricted environments, CSS can offer simple workarounds. Though limited, CSS techniques can handle about 10–15% of basic text substitution needs. We'll explore these methods and where they work best.

Using :after Pseudo-element

The :after pseudo-element allows you to insert content after the selected element. You can use this technique to replace text by hiding the original text and placing new text in its place.

Steps:

Wrap the Text: Assign a class to the text you want to replace.

<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: 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

index.html

<!DOCTYPE html>
<html lang="en">
<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

Another approach involves hiding the original text using a <span> element and displaying new text with the :after pseudo-element.

Steps:

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 above approach.

index.html

<!DOCTYPE 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

Note: By using these CSS techniques, you can effectively replace text on a webpage without needing to modify the server-side code. Whether you choose to utilize the :after pseudo-element or combine pseudo-elements with CSS visibility, these methods offer flexibility and control over how text is displayed.

How to Add a Gradient Overlay to Text with CSS?

N

Nilarjun

Improve

Article Tags :

Similar Reads

How to set inner text shadow with CSS ?

CSS is a style sheet language that describes the document's presentation written with HTML or similar markup languages. In this tutorial, we are going to learn how to set inner text shadows with CSS. Approach: Text shadow is used to design the text elements such as paragraphs, headings, etc. We firs

How to Place Text Over an Image using CSS?

Place Text Over an Image means overlaying text on top of an image using HTML and CSS. This effect is commonly achieved by placing the image and text inside a container and then using CSS techniques like absolute positioning, z-index, or flexbox to position the text over the image.Below are the appro

How to italicize text in CSS ?

Here are the approaches to italicize text in CSS: Using the font-style PropertyThe CSS font-style property is the most straightforward way to italicize text.HTML<html> <head> <style> .italic-text { font-style: italic; } </style> </head> <body> <p class="italic-

How To Place Text on Image using HTML and CSS?

To place text on an image using HTML and CSS, you can use different techniques to make the text look good and easy to read. Here, we will explore two approaches for placing text over an image using simple HTML and CSS.1. Using Absolute Positioning This approach uses absolute positioning to place the

How to Add a Gradient Overlay to Text with CSS?

Adding a gradient overlay to text can create visually appealing effects that enhance the design of a website. CSS provides various techniques to apply gradients to text. Table of Content Approach 1: Using background-clipApproach 2: Using a MaskApproach 3: Using SVGGradient Overlay to Text using back

How to Change <span> Text with jQuery?

Changing the text of a span element in jQuery involves dynamically updating the content displayed within a <span> tag. This capability is often used in web development to reflect real-time changes, respond to user actions, or update information without reloading the entire page.jQuery text() M

How to Style Text Buttons using CSS?

Text buttons are buttons that consist only of text without any additional background or border styling. They are commonly used for simple actions or navigation elements in a website or web application. Table of Content Basic StylingHover EffectsBasic StylingIn basic CSS we can style text buttons usi

How to Place Text Blocks Over an Image using CSS?

Placing text blocks over an image is a common technique used in web design to create visually appealing layouts. Here, we will explore different approaches to achieve this effect using CSS.Below are the approaches to place text blocks over an image using CSS:Table of Content Using Absolute Positioni

How to Set Text Color in ReactJS ?

React provides you the ability to create interactive and dynamic useÂr interfaces. Within theseÂ interfaces, the choice of text color holds significant importance as it enhanceÂs the visual appeal and engageÂment for users. A foundational aspect of styling revolveÂs around modifying text color. In t

How to Toggle Text with JavaScript?

Toggling text is a common functionality in web development. Text toggling means switching between two or more text values when a user performs a specific action, such as clicking a button. This feature can be used in creating expandable/collapsible sections, toggling visibility of text etc.Below are