How to Change Content in CSS

In web applications, every developer strives to improve the appearance and overall user experience from every aspect. Sometimes developers want to do things differently and better than others. For example, showing a text on something and then changing it into something else according to the updates. This all could be done with the help of CSS different properties and selectors.

This write-up will guide you about changing content in CSS.

How to Change Content in CSS?

To change the content in CSS, we will use the below methods:

• ::after selector with the content property
• ::before selector with the content property

Let’s go through each method one by one!

Method 1: Use ::after Selector with content Property to Change Content in CSS

The “::after” selector places the specified content after the HTML element using the CSS “content” property. This operation helps in adding the content to the selected element. Additionally, the “display” property can be utilized to hide the existing content.

Let’s have a look at the below example to understand how to change the content in CSS using the ::after selector.

Example

Here is our HTML page with the text “Good Morning!!!”. Let’s replace the added content:

Currently, we have added a “<p>“ tag with text in the body section of our HTML file:

In our CSS file, we will now use the ::after selector as “body::after” and use the “content” property with the value “Good Evening” inside its definition. As a result, the CSS selector will place the text right after the written text. Lastly, hide the existing text using the “display” property and set its value to “none”:

Now, save your HTML file and simple open it on browser or use “Live Server” for the same purpose:

As you can see, the content has been changed successfully using the ::after CSS selector:

Method 2: Use ::before Selector with content Property to Change the Content in CSS

In CSS, the “::before” selector is utilized to make the content appear right before the existing content of an element. It can be used in combination with the “content” property to add new content to the selected element.

Example

Specify the ::before selector right after the body as “body::before”. This will place the new content before the existing content. Note that all the other properties remain the same as in the previous example:

Output

We have explained different methods to change the content in CSS.

Conclusion

To change the content, “::after” and “::before” CSS selectors are used with the “content” property. In the first approach, the specified text is added after the selected element, whereas the second CSS selector works the opposite. Moreover, the “display” property can be utilized to hide the existing content of an element. This is how the content is changed completely in CSS. We have covered the two methods of changing the content in CSS.