html - 在伪元素未显示之前

Question

div {
    width: 100px;
    height: 100px;
    background: red;
}

div:before {
    content: "";
    width: 100px;
    height:30px;
    background: yellow;
}

为什么未设置位置值(分别为相对值和绝对值)时，div 元素上方不显示 before 伪元素？

Answer 1

::before和 ::after伪元素默认是display:inline，width和height不会影响。

您可以将伪元素设置为display:block。

div {
  width: 100px;
  height: 100px;
  background: red;
}

div:before {
  content: "";
  display: block;
  width: 100px;
  height: 30px;
  background: yellow;
}

<div></div>

View on JSFiddle

另见 What is the default display property of the :before and :after pseudo-elements?