
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.