Replacing text is usually done on the server side or with JavaScript, but there may be times when replacing text using CSS is the only viable solution.

Below we have a paragraph of text and need to replace it.

<p class="my_text">This text needs to be replaced.</p>

First we need to hide the existing text and make the container element relative.

.my_text {
    visibility: hidden;
    position: relative;
}

Then we need to add the new text in the exact same position using the ::after pseudo element and absolute positioning.

The content is created, visibility for the ::after element set to visible, and the new element set to be positioned absolutely at top: 0, left: 0 which places it over the hidden original text.

.my_text::after {
    content: "This text replaces the original.";
    visibility: visible;
    position: absolute;
    top: 0;
    left: 0;
}