How to Replace Text in CSS?

How to Replace Text in CSS?

  • 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;