How to Replace Text in CSS?

How to Replace Text in CSS?

Written by
Vinish Kapoor is a seasoned software development professional and a fervent enthusiast of artificial intelligence (AI). His impressive career spans over 20 years, marked by a relentless pursuit of innovation and excellence in the field of information technology. As an Oracle ACE, Vinish has distinguished himself as a leading expert in Oracle technologies, a title awarded to individuals who have demonstrated their deep commitment, leadership, and expertise in the Oracle community.
  • CSS
  • 1 min read

This tutorial shows how to replace the text of an element in CSS.

Suppose you have a text in an element (span, h2, etc) and you want to replace it using CSS, then use the following approach.

Replace Text in CSS Example

In the below example, it will replace the text of the h2 heading having the class share-heading. First, make the visibility of that element hidden. To do that use the following CSS:

h2.share-heading {
   visibility: hidden;
}

Then use :after pseudo to add the new text:

h2.share-heading:after {
  visibility: visible;
  text-align: center;
  content: "Your New Text";
  font-size: 22px; 
  margin-left: -250px !important;
}