Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by Tabrez Ahmad
Tabrez Ahmad
1,822 Points

Pseudo-Elements – ::before and ::after

Hello,

I just completed this video, and I'm very comfortable with understanding it, in fact, I think it's awesome!

Anyway, our man Guil mentions that “These virtual elements are visible to the user and are styleable with CSS, but they do not appear in the source code.”

What I want to know, is WHY is it important or considered a feature that “they do not appear in the source code”?

Thanks.

Arsallan Shirvani
Arsallan Shirvani
3,852 Points

Hello!

Have a look at this link: http://www.hongkiat.com/blog/pseudo-element-before-after/

The first paragraph is the answer to your question I think.

Tabrez Ahmad
Tabrez Ahmad
1,822 Points

Perfect Arsallan,

Thanks very much!

Arsallan Shirvani
Arsallan Shirvani
3,852 Points

My pleasure! :)

4 Answers

Véronique Bellamy
Véronique Bellamy
20,810 Points
Véronique Bellamy
Véronique Bellamy
20,810 Points

Because you can add content in your styles that you might want to change later. For example, on my site, I can add a .navbar-brand:before class that embeds my logo on the navigation bar on my site. This way, I can change the logo used if I were using an inverse colour layout or a layout with special colours.

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

Essentially with pseudo-elements every HTML element you wrote by hand comes with special additional elements (for no extra charge :wink:). These special elements are invisible (like ::before & ::after) but they can be style with CSS the same way as any other element.

Erik Nemesis
Erik Nemesis
13,356 Points
Erik Nemesis
Erik Nemesis
13,356 Points

Note that there are more than just pseudo-elements that show things but are not found on the source code. There are also Shadow DOM but that will just add to your confusion :p

Tabrez Ahmad
Tabrez Ahmad
1,822 Points
Tabrez Ahmad
Tabrez Ahmad
1,822 Points

Thanks for the feedback everyone! Much more clear now :)