::before element doesn't show up without display:flex-CodePudding

With below Code

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

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

<div >
  Hello World
</div>

I am not sure why the ::before element won't show up if I remove the display: flex. Code snippet in JSbin here

CodePudding user response：

The :before element doesn't "show up" because the default display property acts like display: inline; and you cannot set the with or height of an inline element.

Definition of width on MDN :

Applies to: all elements but non-replaced inline elements, table rows, and row groups

[reference] (emphasis mine)
And the same goes for height, see here

When you set display: flex; on the parent, the children act like flex items that can have a width / height.
The initial value of align-items for flex items is normal (behaves like stretch in this context see here). This value makes the items take 100% height.

If you don't want to use display: flex; on the parent, you could change the default property of the pseudo element to display: inline-block; but you will need to specify a height otherwise it won't display either. Note that there will be a white-space between the pseudo element and the content.
Here is an example :

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

<div >
  Hello World
</div>