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 Layout Techniques Float Layout The Float Clearfix

Posted by orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

after pseudo-element

Hello!

Can you please help me understand the style rules in the after pseudo-element . I understand to clear a float, we use clear:both, but

1) What does ": :" mean after .group? 2) What does 'content: " " ' mean? 3) why do we need 'display:table' in after pseudo-element ? 4) Do I need all 3 style rules to create an after-pseudo-element ?

.group: :after{
content: " ";
display: table;
clear:both;

}

}

3 Answers

Ron McCranie
Ron McCranie
7,837 Points
Ron McCranie
Ron McCranie
7,837 Points

the code should be this:

```.group:after { content: " "; // creates an element with just one space, no actual content display: table; // could also use 'block' this makes the element take up the full width of the parent element clear:both; // clear the floats (left & right) }

It's actually called a clearfix. This clears the floats so that you can get back to standard layout after this element. It is not required for all 'after' pseudo elements. The other way of using an after would be to add an icon or "next" arrow only using CSS (without touching the HTML).

See Chris Coyier's post on the subject. http://css-tricks.com/snippets/css/clear-fix/
Jennifer Crawshaw
Jennifer Crawshaw
17,878 Points
Jennifer Crawshaw
Jennifer Crawshaw
17,878 Points

The double colon :: is used to identify a pseudo element. (after in this code). It will work with a single colon, but is better syntaz to use double colon. Content: " " is adding empty content to the .group element. This is used so that you can float the empty content that was added to accomplish the clearfloat. Any element that is given the class "group" will get this clearfix applied.

orange sky
seal-mask
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points
orange sky
.a{fill-rule:evenodd;}techdegree
orange sky
Front End Web Development Techdegree Student 4,945 Points

Thanks Jennifer and Ron!

Jennifer mentioned that I can use a single colon, however it is better to use a double colon, so that explains : ".group:after { ..." in Ron's explanation. Thanks Jennifer!

content: " "; // creates an element with just one space, no actual content

1) Ron, what element is a creating and why does it need to create and element withouht content?

table; // could also use 'block' this makes the element take up the full width of the parent element

2) I see. the goal is to give our .main-header a full width. I noticed everytime we want to clear a collapsed margin, we give the parent container a full width. Have you noticed that? Would you happen to know why a full width clears a margin collapse?

Thanks for the link Ron!