css - :before, :after 规则的目的，没有 content 属性

Question

据我了解，:before并:after在指定目标之前或之后插入内容。我不太确定这个 CSS 片段的目的是什么？

*, *:before, *:after {
    -moz-box-sizing: border-box;
}

score 4 · Accepted Answer

这会将边框大小调整到所有元素以及它们可能生成的任何:before和:after伪元素。该部分表示任何*:before, *:after元素的相应伪元素。

一旦您稍后在样式表中创建特定:before/:after规则，此声明将自动应用于所有这些伪元素，因此您不必在每个伪元素规则中重复它。换句话说，级联对伪元素的工作方式与对实际元素的工作方式完全相同：当您有单独的规则匹配同一事物时，只要它们匹配，它们都会被应用。

请注意，为了使元素实际生成:beforeor :after，它content必须不是none. 就其本身而言，您提供的 CSS 不会导致每个元素都自动生成两个伪元素；它只是确保浏览器在需要渲染它们时使用边框大小。请参阅规范以了解生成的内容如何工作。

例如，以下 CSS：

*, *:before, *:after {
    box-sizing: border-box;
}

div:after {
    content: "hello";
}

导致 adiv的:after伪元素具有边框大小。没有其他元素生成:after伪元素，但如果引入更多 CSS 规则，它们将具有与通用规则相同的框大小。

还要注意，box-sizing: border-box没有-moz-前缀应该出现在给定的 CSS 中，因此其他浏览器也将应用相同的框大小。Firefox 使用该-moz-前缀直到版本 28（刚刚发布的版本 29 附带 unprefixed box-sizing）。看到这个答案。

score 0 · Accepted Answer

它适用于具有所有伪元素（:before、:after）的所有元素，并且使它们使用border-box框大小。

有关box-sizing在此处查看的更多信息：http: //css-tricks.com/box-sizing/

该border-box值使最终呈现的框具有声明的宽度，并且框内的任何边框和填充都被剪切。

score -2 · Accepted Answer

*, *:before, *:after { box-sizing: border-box; }

:after这是为了不在您使用和的所有地方重复:before。它会自动添加到所有:after和:before.

css - *:before, *:after 规则的目的，没有 content 属性