Question

好奇心问题，在网上找不到任何答案。

我在CSS中使用了很多:before和:after所以我在样式表的开头声明了这一点：

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

这样，每次我需要一个伪类时，我都不必声明content。

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

示例：他们居中，而我宣布justify-content: space-between

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

Answer 1

不，flexbox不会使用content: "something"生成自己的伪类。这里发生的事情与所有其他::before和::after伪元素完全相同，即您正在创建额外内容。 content: ""与content: none不同！

在这个例子中，我给孩子们边框，以便你可以看到他们在哪里。没有::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>

如果这是Flexbox的不良行为，只需将content属性重置为none即可。

Answer 2

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

如果容器中有两个实际（DOM）元素，justify-content: space-between，然后添加::before和::after元素，则现在有四个弹性项。这些伪占据边缘位置，迫使DOM元素在容器中传播。

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

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

此处有更多详情：Equal space between flex items

flexboxes生成：before和：after？

2 个答案: