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:
{codecitation}<div class=”content”>
<h2>Text inserted via HTML (the regular way)</h2>
</div>{/codecitation}
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.
{codecitation css}.content:before {
content: ‘Text inserted before via CSS’;
}{/codecitation}
Here’s a very similar example, but using the :after pseudo-element to display some text after .content.
{codecitation css}.content:after {
content: ‘Text inserted after via CSS’;
}{/codecitation}
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.
Nice trick guru ! Thanks !
Glad that was helpful, Simon
Okay nice i have a question or i am bit confused. Suppose i have three bars that is menu icon. I want to insert text before that bars. I used different methods but didn’t get exact alignment. bars are placed down text above that. can u help me
how can i use line break in content:’this is content,
hello Valentin’;
like this , when i use
hello vanletin come in next lie
basically instead of saying
[code]’hello
goodbye'[/code]
you would say
[code]’hello \A goodbye’ [/code]
idk why backslash a works when br tag doesn’t
also if this still doesn’t work, you need to modify the whitespace tag with `white-space: pre;` bc your browser is choosing to, by default or purposeful configuration request, collapse whitespace for you (see example below)
[code]p:after {[/code]
[code] content: “hello \A goodbye”;[/code]
[code] white-space: pre; /* won’t work without this */[/code]
[code]}[/code]
How can i write under the hello
“Example:
Hello
World”
I really need help