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 Mobile First Layout

Posted by Jay Valentine
Jay Valentine
Courses Plus Student 4,389 Points

What does ::after {content: " "} mean? Why is content empty?

Title says it all.. What does ::after {content: " "} mean? Why is content empty?

Niclas Valentiner
Niclas Valentiner
8,947 Points
Niclas Valentiner
Niclas Valentiner
8,947 Points

From 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

1 Answer

Chris Shaw
Chris Shaw
26,676 Points
Chris Shaw
Chris Shaw
26,676 Points

Hi 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.