How to replace text with CSS? - GeeksforGeeks (2024)

Courses
Tutorials
- Data Structures & Algorithms
- Python
- ML & Data Science
  - Machine Learning
  - Data Science Tutorial
  - Data Science Packages
    - Pandas Tutorial
    - NumPy Tutorial
  - Data Visualization
  - Data Analysis
  - Deep Learning
  - NLP Tutorial
  - OpenCV Tutorial
  - Interview Questions
- System Design
- Interview Corner
- Languages
  - C
  - C++
  - Java
  - Python
  - R Tutorial
  - C#
  - SQL
  - Scala
  - Perl
  - Go Language
- Web Development
  - HTML
  - CSS
  - JavaScript
  - TypeScript
  - ReactJS
  - Node.js
  - PHP
  - AngularJS
  - jQuery
  - Web Development Using Python
  - Web Design
  - 100 Days of Web Development
- CS Subjects
- DevOps And Linux
- School Learning
- GATE
- GeeksforGeeks Videos
Jobs
- Get Hired: Apply for Jobs
- Corporate Hiring Solutions
- Filtered Jobs
Practice
- All DSA Problems
- Problem of the Day
- Company Wise Coding Practice
- GfG SDE Sheet
- Practice Problems Difficulty Wise
- Language Wise Coding Practice
- Curated DSA Lists
Contests

Open In App

Last Updated : 15 Sep, 2024

Summarize

Comments

Improve

Suggest changes

Like Article

Save

Report

Replacing text on a webpage is typically done on the server side, but there are situations where you might need to do this directly in CSS. This can be useful when you don’t have server access or are working within certain restrictions. CSS offers a couple of methods to replace text, which we’ll explore here.

Table of Content

Using :after Pseudo-element

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

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:

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

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:

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.

Nilarjun

Improve

How to set inner text shadow with CSS ?

Please Login to comment...

Similar Reads

How to replace a text in a string with another text using PHP ?

A string is a sequence of one or more characters. A string is composed of characters, each of which can be replaced easily in the script. A large number of in-built PHP methods can be used to perform string replacements. Table of Content Using str_replace() method - The str_replace() Using str_ireplace() method Using preg_replace()Using substr_repl

4 min read

How to create long shadow of text without using text-shadow in HTML and CSS ?

Shadows are really a nice way to give depth and 3-D look to any text. Generally, we use text-shadow to give shadow to the text but this shadow is short and to create long shadow (shadow in which text is visible like that of reflection) we have to use before selector and skew function. Approach: The approach is to use a skew to create tilted text fi

2 min read

Text Animation with changing the color of the text using HTML and CSS

Text animation is the creation of beautiful and colorful letters, words, and paragraphs with a decorative movable effect. The movement can be seen in some fashion within the area or across the screen following some regular pattern. The @keyframes in CSS allows defining a series of animations at specific points during an animation sequence. In this

2 min read

How to Style the Text using text-decoration Property in CSS ?

The text-decoration property in CSS is used to style the decoration of text, such as underlining, overlining, line-through, and blink effects. It is a versatile property that can enhance the visual appearance of text. Syntax/* Example of using the text-decoration property */ .element { text-decoration: [value]; }The text-decoration Property ValuesT

1 min read

How to replace text after a nested tag in jQuery ?

In this article, we will see how to replace text after a nested tag using jQuery. There is one main approach that can be followed. Approach: We use the click(), contents() and filter() methods and this, nodeType and nodeValue properties. There is one division element with an id of outer-tag with a span tag with a class of nested-tag nested within i

2 min read

How to select all text in HTML text input when clicked using JavaScript?

This example shows how to select entire input in a single click using javaScript. Syntax: <input onClick="this.select();" > or document.getElementById("ID").select(); Example-1: Using "this.select()". <!DOCTYPE html> <html> <head> <title> Select all text in HTML text input when clicked </title> </head> <

1 min read

How to get text inside Text component onPress in ReactJS ?

In this article, we will learn "How to get the text inside Text component onPress in ReactJS?". Problem Statement: Sometimes in an application, it is required to get the text inside certain components, in order to reuse the components again & again just by changing the text value. Approach: We will set the property inside the component's tag to

4 min read

How Create a Text Box Where User Can't Type Inside the Text Box ?

To create a text box where the user can't type inside the text box, we have different approaches. In this article, we are going to learn how to create a text box where the user can't type inside the text box in JavaScript. Below are the approaches to creating a text box where the user can't type inside the text box: Table of Content Using Readonly

How to replace text with CSS? - GeeksforGeeks (2024)

Using :after Pseudo-element

Steps:

Using Pseudo-elements & CSS Visibility

Steps:

Please Login to comment...

Similar Reads

Thank You!