:before元素没有"显示"，因为默认的display属性类似于display: inline;，并且您不能设置行内元素的with或height。
MDN上的宽度定义：
适用于：除未替换行内元素、表行和行组之外的所有元素
[参考]（* 着重号为我 *）
身高也是一样，看这里
当您在父项上设置display: flex;时，子项就像具有宽度/高度的Flex项目一样。
弹性项目align-items的初始值为normal（在此上下文中的行为类似于拉伸，请参见此处）。此值使项目具有100%的高度。
如果你不想在父元素上使用display: flex;，你可以将伪元素的默认属性改为display: inline-block;，但是你需要指定一个高度，否则它也不会显示。注意伪元素和内容之间会有一个空格。
下面是一个例子：

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

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