How to Insert Website Content With CSS

Do you know that you can add content to your website using CSS?

It sounds crazy, but it's true. I'm going to show you how to add text to a website using the content CSS property. We're also going to use the :before and :after pseudo-elements. 

Step #1. The HTML

For this example, I'm going to use the HTML code below:

<div class="content">
    <h2>Text inserted via HTML (the regular way)</h2>
</div>

The selector we will use in this case is the class content, plus the :before and :after pseudo-elements.

Step #2. Insert text with CSS

Let's build our CSS selector to target the element in our sample HTML. We are going to insert some text before .content by using the :before pseudo-element.

Load the code below inside one of your stylesheet files.

.content:before {
    content: 'Text inserted before via CSS';
}

Here's a very similar example, but using the :after pseudo-element to display some text after .content.

.content:after {
    content: 'Text inserted after via CSS';
}

Step #3. Check the end result

Open the site in your favorite browser, so you will see the text inserted by CSS before and after the HTML snippet. 

About the author

Valentín creates beautiful designs from amongst the tequila plants of Jalisco, Mexico. You can see Valentín's design work all over this site and you can often find him helping members in support.