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 Allison Walker
Allison Walker
17,137 Points

When should you use the pseudo elements ::before and ::after, vs just putting the content into the HTML?

I'm asking because it seems like it could become confusing later when trying to understand the document, because there would be elements appearing in the page but they aren't in the HTML.

So, in what type of scenarios would you use a pseudo element? What are the best practices?

2 Answers

Austin Whipple
Austin Whipple
29,725 Points
Austin Whipple
Austin Whipple
29,725 Points

Psuedo elements such as ::before and ::after are useful to maintain separation between content and design. If, for instance, you want to add icons to a certain element class, using the ::before psuedo element to all specified elements allows you to manage that design element separate from the page's HTML (which is meant to handle content only).

Allison Walker
Allison Walker
17,137 Points

So, would you add a comment somewhere that a certain element class has additional icons that are found in the CSS? How would you go about making your source code (HTML) and CSS easy to troubleshoot in the future?

Marcus Parsons
Marcus Parsons
15,719 Points

Comments are an excellent way to help out other developers, and they are always useful for identifying what is going on in any code. But, even without comments, an experienced developer would know to look at the HTML document first and see if the content is there. If not, they would look at the CSS for that content's selector containing a pseudo-element and/or pseudo-class.

Marcus Parsons
Marcus Parsons
15,719 Points
Marcus Parsons
Marcus Parsons
15,719 Points

I feel like you might be just a tad confused on what pseudo elements do and what they are. Pseudo elements are elements that are used to affect already existing elements.

I think, looking at your question, you are specifically referring to the ::before and ::after pseudo elements when you speak of adding content instead of the pseudo element. I'm not sure if it's faster or more efficient to, let's say, add an image element into a div right before the content or just use the ::before pseudo element on the div's ID or after the content using ::after.

However, pseudo elements have more uses than just adding content before and after some element. They can be used to target and stylize text in an efficient manner. For example, ::first-letter allows you to stylize the first letter of a block of content in a line, provided that it is not preceded by any content. For an example of how this can be used to make a block of text look much better, you can check out this website I did for a client: JP Stevens Process Service, Inc..

And for more information on pseudo elements (and pseudo classes), check out: Mozilla Developer - Pseudo Elements.

Allison Walker
Allison Walker
17,137 Points

I am not confused.

Marcus Parsons
Marcus Parsons
15,719 Points

That was not certainly not intended as a slight or in any negative connotation. Everyone can be confused about something which is why we reach out for help. I hope that you read the rest of my comment, instead of just stopping at the first couple sentences.