问题
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?
回答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.
回答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.
回答3:
CSS has a property called content. It can only be used with the pseudo elements :after and :before. It is written like a pseudo selector (with the colon), but it's called a pseudo element because it's not actually selecting anything that exists on the page but adding something new to the page
see this for better explanation :
- Css Content 1
- Css Content 2
and the nav element is :
One of the new elements for HTML 5 is the element which allows you to group together links, resulting in more semantic markup and extra structure which may help screenreaders. In this article I’ll discuss how and where to use it as well as some reservations I have with the specifications definition.
- Html5 TAGS
来源：https://stackoverflow.com/questions/9599811/why-do-i-need-an-empty-content-property-on-an-after-pseudo-element