：在伪元素不会隐藏在其父元素之下之前，

Question

我的按钮z-index为1，而该按钮:: before z-index为-1。但是:: before不会隐藏在按钮下方。

button {
  color:white;
  position:relative;
  z-index:1;
}

button::before {
  content:'';
  width:100%;
  height:100%;
  background-color:orange;
  position:absolute;
  top:0;
  left:0;
  z-index:-1; /* this z-index is lower than button z-index. I want this to hide under the button.
}

<button>
text
</button>