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

Ehsan Raza
Ehsan Raza
263 Points
Posted by Ehsan Raza
Ehsan Raza
263 Points

why we use "content" and why we left it blank? Also what does "after" mean in this video?

Plz answer.

Dylan Macnab
Dylan Macnab
24,861 Points
Dylan Macnab
Dylan Macnab
24,861 Points

The content is left black because you don't want to add anything to the page. The goal of the clearfix is just to clear all the child elements in their parent element so that the layout doesn't break. http://css-tricks.com/snippets/css/clear-fix/

The ::after is a pseudo element used to insert content into the page from the CSS. Think of it like injecting an HTML element from the CSS. In the case of a clearfix, the ::after isn't actually injecting any content, as it's just acting as an invisible (empty, blank) element that gets injected into the html ::after the parent element, which makes the clearfix work. See more about the ::before and ::after pseudo elements here: http://css-tricks.com/almanac/selectors/a/after-and-before/

Hope that helps. let me know if you have any questions.

3 Answers

jaredcowan
jaredcowan
11,808 Points
jaredcowan
jaredcowan
11,808 Points

Say that I have a <span class"my-text"> With This Text </span>

In our css we could do this.

.my-text:before {
  content: "Playing ";
}

Would produce Playing With This Text

and then adding an after.

.my-text:after {
  content: " Again...";
}

Would produce Playing With This Text Again...

Sometimes the content: " "; could be left blank for a few reasons.

The most common being to add the clearfix hack or to make your own underline or some other styling.

Basically, anything you float needs to cleared. So when you see blank content: " "; with a `display: table;' in a before and after. It's just making sure that those elements stay positioned where you want them and other elements don't push or conflict.

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Ehsan Raza,

I explain the clearfix in more detail at 5:40 in this video. I also cover the :after pseudo-element and content property in this video.

Hope this helps. :)

Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points
Dekin O'Sullivan
Dekin O'Sullivan
10,749 Points

Hi Guil, I am really not very happy with the content of this video. I am following the Web Design curriculum and so I did CSS basics but not the CSS Foundations you constantly talk about in this video. This is unfair and unfortunate. If I follow a curriculum suggested by Treehous every step should follow logically and build up progressively. Instead, I was not really equipped to understand this video, and judging by the questions by other users I don t appear to be alone... I would prefer if each video was self contained and not relying on someone having taken another course, like is the case with this video and is clearly a fail... And even after watching for the 1st time your ":after" video to better understand this video, I still only feel I understand half of it and am missing more in depth info about the clearfix technique...

wuworkshop
wuworkshop
3,429 Points
wuworkshop
wuworkshop
3,429 Points

I haven't seen the video you're watching, but another Treehouse CSS course has a reference in the Teacher's Notes section to the blog post below that explains the clearfix technique in more detail.

http://nicolasgallagher.com/micro-clearfix-hack/