为何移除display:flex后::before伪元素无法显示？

你的代码如下：

.quote {
  display: flex;
  /*?? without this, ::before doesn't show up*/
}

.quote::before {
  content: "";
  min-width: 8px;
  background-color: #F7DF94;
}

<div class="quote">
  Hello World
</div>

原因解析 #

• 未设置display:flex时，.quote是默认的块级元素，此时::before伪元素的默认显示模式为行内元素。行内元素不支持min-width属性，再加上你只给伪元素设置了背景色，没有其他能撑开尺寸的属性（比如宽、高或实际内容），伪元素没有可见尺寸，自然无法显示。
• 当给.quote设置display:flex后，伪元素会成为flex容器的子元素，flex子元素的默认表现类似块级元素，此时min-width属性生效，伪元素拥有了8px的宽度，背景色就能正常显示。

替代方案（不用flex也能显示伪元素） #

如果不想用flex布局，只需修改伪元素的显示模式，让它能被尺寸属性控制：

.quote::before {
  content: "";
  width: 8px; /* 用width替代min-width也可行 */
  background-color: #F7DF94;
  display: inline-block; /* 也可设置为block */
  height: 1em; /* 可选，按需设置高度让背景更清晰 */
}

内容的提问来源于stack exchange，提问作者Xin Li