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 CSS Basics (2014) Basic Layout Clearing Floats

Rafael Zuniga
PLUS
Rafael Zuniga
Courses Plus Student 2,373 Points
Posted by Rafael Zuniga
Rafael Zuniga
Courses Plus Student 2,373 Points

:after pseudo question

I don't understand why we have to put the :after pseudo element to clear the floats. Why won't it work without it, obviously I tried it and it doesn't work, but why? I am basically trying to figure out why it works the way it does. Can someone please help explain? Thanks!

1 Answer

Jacob Mishkin
Jacob Mishkin
23,118 Points

I can't say it any better than MDN:

"The CSS ::after pseudo-element matches a virtual last child of the selected element. It is typically used to add cosmetic content to an element by using the content CSS property. This element is inline by default."

So when your clearing floats, you are selecting the last element.

Here is more interesting info on this pseudo-element.

https://developer.mozilla.org/en-US/docs/Web/CSS/::after