为什么在 ::after 伪元素上需要一个空的 `content` 属性？

Question

我从之前问过的一个问题中得到了http://jsfiddle.net/8p2Wx/2/，我看到了这些代码：

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

.cf:after {
    clear:both;
}

如果我去掉 content:""，那么就会破坏效果，但我不理解为什么需要它。

为什么在 :after 和 :before 伪元素中需要添加空的 content？

- qwertymk

Answer 1

如果你没有定义生成的内容，那么就无法为其设置样式。如果你只是需要一个额外的“不可见元素”进行样式设置，而不需要任何真正的内容，那么可以将其设置为空字符串 (content: '') 并对其进行样式设置。

你可以自己轻松验证这一点：http://jsfiddle.net/mathias/YRm5V/

顺便提一下，你发布的代码片段是微型清除浮动技巧，详情请参考：http://nicolasgallagher.com/micro-clearfix-hack/

至于你的第二个问题，在某些旧版浏览器中，你需要使用HTML5 shiv（一个小型 JavaScript 片段）才能对<nav>标签进行样式设置。

- Mathias Bynens

---

导航栏里面不是已经有一个 ul 了吗？它怎么会是空的呢？ - qwertymk

生成的内容会在实际元素内部添加一个额外的不可见元素。例如，在 CSS 中使用 ul:after 并将其 content 属性设置为某些内容，将会在 <ul> 后面添加一个新的元素，该元素在 DOM 中是不可见的，但可以通过 CSS 进行样式设置。 - Mathias Bynens

这个答案没有解释任何东西。 - Robo Robok

如果你从:after样式中移除display: inline-block，为什么它就不显示了呢？ - undefined

Answer 2

根据CSS规范，只有在属性“content”被设置为除“normal”和“none”以外的值时，才会生成:before和:after伪元素：http://www.w3.org/TR/CSS2/generate.html#content 对于:before和:after伪元素，“content”的初始值为“normal”，而“normal”对于这些伪元素来说等同于“none”。

- luissquall

Answer 3

CSS有一个叫做content的属性。它只能与伪元素:after和:before一起使用。它的写法类似于伪选择器（带有冒号），但它被称为伪元素，因为它实际上并没有选择页面上存在的任何内容，而是向页面添加了新的内容。

请参见以下链接以获得更好的解释：

1. Css Content 1
2. Css Content 2

而nav元素是：

HTML5中的新元素之一是nav元素，它允许您将链接分组在一起，从而产生更语义化的标记和额外的结构，这可能有助于屏幕阅读器。在本文中，我将讨论如何使用它以及规范定义中的一些保留意见。

1. Html5 TAGS

- Jack