How to Insert Website Content With CSS

CSS Selectors to Customize Your Site's Design

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.

1

Instructor

  • Valentin discovered Joomla in 2010, and since then he has considered it as the best CMS. Valentin has been coding extensions and templates for Joomla for many years and truly enjoys helping people build their own websites with Open Source tools. He lives in San Julián, Jalisco, México.

0 0 votes
Blog Rating
Subscribe
Notify of
6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
SimonW

Nice trick guru ! Thanks !

steve

Glad that was helpful, Simon

Alexandre

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

jitender

how can i use line break in content:’this is content,
hello Valentin’;

like this , when i use
hello vanletin come in next lie

achoo

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]

Guri

How can i write under the hello
“Example: 
Hello

World”

I really need help

6
0
Would love your thoughts, please comment.x
()
x