flexboxes 会生成 :before 和 :after 吗？

Question

好奇问题，网上找不到答案

我在我的 CSS 中使用了很多 :before 和 :after 所以我在我的风格开头声明了这一点 sheet :

:before, :after {
   content: "";
}

这样我就不用每次需要伪class的时候都声明content了。

但是当我这样做时，我用 display: flex 显示的元素显示不同。

示例：它们居中，而我声明 justify-content: space-between

所以我想知道：flexboxes 用 content: "something" 生成他们自己的伪 classes 吗？

Answer 1

不，flexboxes 不会用 content: "something" 生成自己的 pseudo-classes。这里发生的事情与所有其他 ::before 和 ::after 伪元素一样，即您正在创建额外的内容。 content: "" 与 content: none 不同！

在这个例子中，我给出了 children 边框，这样你就可以看到它们的位置。没有 ::before 和 ::after:

section {
  display: flex;
  background: yellow;
  justify-content: space-between;
}
section div {
  border: 1px solid red;
}

<section>
 <div>one</div>
 <div>two</div>
</section>

以及 ::before 和 ::after。所以现在你有两个元素和两个伪元素，总共有四个内容。行为完全符合预期：这四位均匀分布。

section {display:flex; background:yellow; justify-content:space-between}
section div {border:1px solid red;}
section::before, section::after {content:""; border:1px solid red;}

<section>
 <div>one</div>
 <div>two</div>
</section>

如果这是 flexboxes 不需要的行为，只需将这些元素的 content 属性重置为 none。

Answer 2

跨盒模型，伪元素成为容器的子元素。因此，当您在弹性容器上声明 ::before / ::after 时，这些伪元素将成为弹性项目。

如果容器中有两个实际的 (DOM) 元素，justify-content: space-between，然后添加 ::before 和 ::after 元素，您现在有四个 flex项目。这些伪元素占据了边缘位置，迫使 DOM 元素散布在容器中。

这实际上是一种可用于在容器中均匀展开弹性项目的方法。不是 space-between，不是 space-around，而是 space-evenly，它在所有项目的两边分配相等的 space。

由于 space-evenly 尚未得到广泛支持，伪元素 hack 是一个可靠的解决方法。

此处有更多详细信息：Equal space between flex items

flexboxes 会生成 :before 和 :after 吗？

Do flexboxes generate :before and :after?

css

pseudo-class

flexbox