Before pseudo element not showing

Question

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

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

Why isn't the before pseudo element showed above the div element when the position values (relative and absolute respectively) are not set?

Answer 1

The ::before and ::after pseudo-elements are display:inline by default, which width and height will not affect.

You can set the pseudo-element to 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

Also see What is the default display property of the :before and :after pseudo-elements?