为啥在 ::after 伪元素上需要一个空的 `content` 属性？ [复制]

Posted 2023-03-05

【中文标题】为啥在 ::after 伪元素上需要一个空的 `content` 属性？ [复制]

【英文标题】：Why do I need an empty `content` property on an ::after pseudo-element? [duplicate]为什么在 ::after 伪元素上需要一个空的 `content` 属性？ [复制]

【发布时间】：2012-03-24 21:10:44

【问题描述】：

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

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


.cf:after 
    clear:both;

如果我拿走content:""，就会破坏效果，我不明白为什么需要这样做。

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

【参考方案1】：

如果不定义内容应该是什么，您就无法为生成的内容设置样式。如果你真的不需要任何内容​​，只需要一个额外的“不可见元素”来设置样式，你可以将它设置为空字符串 (content: '') 并设置它的样式。

这很容易自己确认：http://jsfiddle.net/mathias/YRm5V/

顺便说一下，你发布的 sn-p 是 micro clearfix hack，这里解释一下：http://nicolasgallagher.com/micro-clearfix-hack/

至于您的第二个问题，您需要 an html5 shiv（一小段 javascript）才能使 <nav> 在某些较旧的浏览器中具有样式。

【讨论】：

导航中不是已经有ul 了吗？怎么是空的？

生成的内容在真实元素中为您提供了一个额外的不可见元素。例如。在 CSS 中使用 ul:after 并将其 content 属性设置为某个东西会将一个新元素附加到 <ul> 中，该元素在 DOM 中是不可见的，但可以通过 CSS 设置样式。

这个答案没有任何解释。

【参考方案2】：

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

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

【参考方案3】：

CSS 有一个名为 content 的属性。它只能与伪元素 :after 和 :before 一起使用。它写得像一个伪选择器（带有冒号），但它被称为伪元素，因为它实际上并没有选择页面上存在的任何东西，而是向页面添加新的东西

请参阅此以获得更好的解释：

Css Content 1 Css Content 2

导航元素是：

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

Html5 TAGS