How to replace text (HTML) with CSS

Sometimes you find yourself having to change some text on a page you can easily style using CSS but don’t know where the source code of the page is.

Here’s how to do it:

Suppose you wanted to change the text on the “Add to Cart” button from “Add to Cart” to “Purchase” and knew the “Add to Cart” button belonged to the class “.add-to-cart”, this is how you’d go about doing it:

.add-to-cart {
visibility: none;
}

.add-to-cart:after {
content: ‘Purchase’;
visibility: visible;
display: block;
}

Hope you found that helpful.

Leave a Reply