Why does position: absolute with all negative values lead to expanding element with no content?

Question

I've needed to create a border with a linear gradient. I've found this solution and it works perfectly for me. However, I don't clearly understand how this works. If I haven't got any content, my background isn`t displayed, as well as if only one side(top/left/right/bottom) is set to a negative value. It appears only if all sides are set to a negative value. I would like to discover what rules lead to this.

<div></div>

div {
  position: relative;
  width: 200px;
  height: 60px;
  margin: 30px;
  border-radius: 30px;
  background: #fff;
  text-align: center;
}

div::before {
  content: "";
  position: absolute;
  top: -2px;
  bottom: -2px;
  left: -2px;
  right: -2px; 
  background: linear-gradient(35deg, red, green);
  border-radius: 34px;
  z-index: -1;
}