为什么在:: after伪元素上需要一个空的`content`属性? [英] Why do I need an empty `content` property on an ::after pseudo-element?

问题描述

我从上一个问题中得到了 http://jsfiddle.net/8p2Wx/2/问，我看到了以下几行:

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;
}

如果我拿走content:""，它会破坏效果，而且我不明白为什么这样做是必要的.

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

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

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

推荐答案

您不能在不定义内容内容的情况下对生成的内容进行样式设置.如果您真的不需要任何内容​​，只需设置一个额外的不可见元素"即可，您可以将其设置为空字符串(content: '')，然后对其进行样式设置.

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.

很容易自己确认一下: http://jsfiddle.net/mathias/YRm5V/

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

顺便说一句，您发布的代码段是micro clearfix hack，在此处进行了解释: http://nicolasgallagher.com/micro-clearfix-hack/

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

关于第二个问题，您需要 HTML5 shiv (一小段JavaScript)来制作在某些较旧的浏览器中可设置样式.

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

这篇关于为什么在:: after伪元素上需要一个空的`content`属性?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！