How to Change Content in CSS

1. Use the :after Pseudo-Element and the display Property to Replace Text in CSS
2. Use the :before Pseudo-Element and the visibility Property to Replace Text in CSS

The tutorial will introduce a few ways to change or replace the content in CSS.

Use the :after Pseudo-Element and the display Property to Replace Text in CSS

We can use the pseudo-elements in CSS to change or replace the contents written in HTML. Then use the :after pseudo-element and the content property to achieve our goal.

Use the :after selector to append some content after the selected content. To add the content, we use the content property.

We can write the desired content as the value of the content property. To replace or change the content, we can hide the previously written content and use the content property, selecting the element with the :after selector.

This method sets the display property to none to hide the previous text.

For example, create a div with the class text. Inside the div, write a span tag and the original text inside the span.

In CSS, select the span and set its display property to none. Next, use the :after selector to select the text class.

Finally, write the content property and set its value to the changed text in the body.

When the code snippet in the example below is run, the changed text is shown. Here, the text the original text is removed from the document, and it acts like the element does not exist.

This is because the value of the content property will take its space. As a result, the new content will be shown.

<div class="text">
<span>the original text</span>
</div>

.text span {
 display: none;
}
.text:after {
 content: 'the changed text';
}

Use the :before Pseudo-Element and the visibility Property to Replace Text in CSS

We can change the content written in HTML using the :before pseudo-element in CSS. The :before pseudo-element works similarly to the :after pseudo-element, but the content is presented here.

Use it to write the content before the selected element. This method uses the content property as in the first method.

In addition, we can use the visibility property to hide the previous content and set it to hidden.

When set to hidden, the visibility property will make the content invisible, but the blank space will be shown in the document. But, using the :before selector will override the space with the new content.

For example, select the span element and set its visibility property to hidden in the example used in the first method.

But, remember to remove the previously applied styles. Next, select the text class with the :before selector and write the new content as in the example below.

Use display:none to hide the previous content. However, we cannot use visibility:hidden while using the :after selector as the hidden element’s space will be preserved.

<div class="text">
<span>before</span>
</div>

.text span {
 visibility:hidden;
}
.text:before {
 content: 'after';
}