Why do I need an empty `content` property on an ::after pseudo-element?

Question

I got http://jsfiddle.net/8p2Wx/2/ from a previous question I asked and I see these lines:

.cf:before,
.cf:after {
    content:"";
    display:table;
}

.cf:after {
    clear:both;
}

If I take away content:"", it ruins the effect, and I don't understand why it's necessary.

Why is it needed to add an empty content to :after and :before pseudo-elements?

Solution 1

You cannot style generated content without defining what that content should be. If you don’t really need any content, just an extra “invisible element” to style, you can set it to the empty string (content: '') and just style that.

It’s easy to confirm this yourself: http://jsfiddle.net/mathias/YRm5V/

By the way, the snippet you posted is the micro clearfix hack, which is explained here: http://nicolasgallagher.com/micro-clearfix-hack/

As for your second question, you’ll need an HTML5 shiv (small piece of JavaScript) to make <nav> stylable in some older browsers.

Solution 2

As the CSS spec. states, :after and :before pseudo elements are not generated if prop. content isn't set to a value other than 'normal' and 'none': http://www.w3.org/TR/CSS2/generate.html#content

content initial value is 'normal' and 'normal' computes to 'none' for the :before and :after pseudo-elements.

Comments

[qwertymk]

Doesn't the nav has a ul in it already? How is it empty?

[Mathias Bynens]

Generated content gives you an extra invisible element inside of the real element. E.g. using ul:after in CSS and setting its content property to something will append a new element to the <ul> that is invisible in the DOM, but stylable through CSS.

[Robo Robok]

This answer doesn't explain anything.