为什么我需要在:: after伪元素上使用空的`content`属性？

Question

我从上一个问题中得到了http://jsfiddle.net/8p2Wx/2/,我看到了这些问题:

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

.cf:after {
    clear:both;
}

如果我带走content:"",它会破坏效果,我不明白为什么它是必要的.

为什么需要添加一个空content到:after和:before伪元素？

Answer 1

如果不定义内容应该是什么,则无法设置生成的内容的样式.如果你真的不需要任何内容,只需要一个额外的"隐形元素"来设置样式,你可以将它设置为空字符串(content: '')并且只是样式.

顺便说一下,你发布的代码片段是micro clearfix hack,这里有解释:http://nicolasgallagher.com/micro-clearfix-hack/

至于你的第二个问题,你需要一个HTML5 shiv(小块的JavaScript)来<nav>在一些旧的浏览器中制作样式.

生成的内容为您提供了真实元素内部额外的不可见元素。例如，在 CSS 中使用 `ul:after` 并将其 `content` 属性设置为某些内容，将会向 `<ul>` 附加一个新元素，该元素在 DOM 中不可见，但可通过 CSS 设置样式。 (2认同)

Answer 2

正如 CSS 规范。状态，如果 prop. 则不会生成 :after 和 :before 伪元素。content未设置为“正常”和“无”以外的值：http ://www.w3.org/TR/CSS2/generate.html#content

content初始值为 'normal'，对于 :before 和 :after 伪元素，'normal' 计算为 'none'。