CSS 为什么在 ::after 伪元素上需要一个空的 `content` 属性？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/9599811/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Why do I need an empty `content` property on an ::after pseudo-element?
提问by qwertymk
I got http://jsfiddle.net/8p2Wx/2/from a previous question I asked and I see these lines:
我从我之前问过的一个问题中得到了http://jsfiddle.net/8p2Wx/2/，我看到了以下几行：
.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.
如果我拿走content:""，它会破坏效果，我不明白为什么有必要。
Why is it needed to add an empty contentto :afterand :beforepseudo-elements?
为什么需要添加一个空content到:after和:before伪元素？
回答by Mathias Bynens
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.
如果不定义内容应该是什么，您就无法为生成的内容设置样式。如果你真的不需要任何内容，只需要一个额外的“不可见元素”来设置样式，你可以将它设置为空字符串 ( content: '') 并设置样式。
It's easy to confirm this yourself: http://jsfiddle.net/mathias/YRm5V/
自己确认这一点很容易：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/
顺便说一句，您发布的代码段是 micro clearfix hack，在这里解释：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.
至于你的第二个问题，你需要一个 HTML5 shiv（一小段 JavaScript）来<nav>在一些旧的浏览器中设置样式。
回答by luissquall
As the CSS spec. states, :after and :before pseudo elements are not generated if prop. contentisn't set to a value other than 'normal' and 'none': http://www.w3.org/TR/CSS2/generate.html#content
作为 CSS 规范。如果 prop.states, :after 和 :before 伪元素不会生成。content未设置为“正常”和“无”以外的值：http: //www.w3.org/TR/CSS2/generate.html#content
contentinitial value is 'normal' and 'normal' computes to 'none' for the :before and :after pseudo-elements.
content对于 :before 和 :after 伪元素，初始值为 'normal' 并且 'normal' 计算为 'none'。
回答by Hyman
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
CSS 有一个名为 content 的属性。它只能与伪元素 :after 和 :before 一起使用。它写得像一个伪选择器（带有冒号），但它被称为伪元素，因为它实际上不是选择页面上存在的任何东西，而是向页面添加新的东西
see this for better explanation :
看到这个更好的解释：
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.
HTML 5 的新元素之一是允许您将链接组合在一起的元素，从而产生更多语义标记和可能有助于屏幕阅读器的额外结构。在本文中，我将讨论如何以及在何处使用它，以及我对规范定义的一些保留意见。
