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 trialEhsan Raza
263 Pointswhy we use "content" and why we left it blank? Also what does "after" mean in this video?
Plz answer.
3 Answers
jaredcowan
11,808 PointsSay 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
Treehouse TeacherHi 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
10,749 PointsHi 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
3,429 PointsI 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.
Dylan Macnab
24,861 PointsDylan Macnab
24,861 PointsThe 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.