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 trialJay Valentine
Courses Plus Student 4,389 PointsWhat does ::after {content: " "} mean? Why is content empty?
Title says it all.. What does ::after {content: " "} mean? Why is content empty?
1 Answer
Chris Shaw
26,676 PointsHi James,
The content property is required on all pseudo elements which are defined using :before
and :after
. By itself, a pseudo element won't do anything as browsers won't draw the element unless a string as simple as ''
is used in the content property.
For example.
/* this will not render */
#element:before {}
/* this will render */
#element:before {
content: 'hello';
}
In your case I assume you're referring to a clearfix technique which contains floats by adding an element that is very small and invisible to the eye.
Hope that helps.
Niclas Valentiner
8,947 PointsNiclas Valentiner
8,947 PointsFrom my understanding content: " " effectively generates a new empty element. The only place I've seen this used is for float clearfix though so I'm not certain.
As for float clearfix itself, I recommend you check this video on the subject: https://teamtreehouse.com/library/css-layout-techniques/float-layout/the-float-clearfix