带有 ::after 伪元素的按钮样式

Question

我正在尝试设置这样的按钮样式：

现在我首先可以使用附加到按钮的 ::after 元素来设置它的样式。

目前我有这个（使用 sass 语法）：

button {
    min-width: 230px;
    border: 1px solid green;
    background-color: white;
    padding: 25px;
    display: block;
    position: relative;
    z-index: 10;

    &::after {
      content: '';
      display: block;
      position: absolute;
      top: 10px;
      left: 10px;
      width: 100%;
      height: 100%;
      border: 1px solid green;
      background-color: white;
      z-index: -2;

    }
}

但这呈现的东西看起来有点不同：

更右边的矩形是我的:afterelement。 它确实在文本 «Button» 后面（没有 z-Index，它只会在前面），但它不会在另一个矩形后面。

我怎样才能正确地设置这个样式？

感谢您的帮助

干杯

Answer 1

从按钮中删除z-index: 10。当父元素（在本例中为button）具有z-index 值时，它将成为堆叠上下文的根元素，您不能将子元素移到它下面。

您可以在精彩文章What No One Told You About Z-Index 中阅读有关堆叠上下文和堆叠顺序的更多信息。

button {
  min-width: 230px;
  border: 1px solid green;
  background-color: white;
  padding: 25px;
  display: block;
  position: relative;
}

button::after {
  content: '';
  display: block;
  position: absolute;
  top: -10px;
  left: 10px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
  background-color: white;
  z-index: -1;
}

body {
  padding: 20px;
}

<button>Button</button>

Answer 2

我在代码中添加了一些小东西。但这似乎对我有用。可能有更简单的方法，但翻转，翻转有效。 :)

button {
  min-width: 230px;
  border: 1px solid green;
  background-color: white;
  padding: 25px;
  display: block;
  position: relative; 
  left: 20px;
   z-index: 10;  
  transform: rotateY(180deg);
}

button::after {
  content: '';
  display: block;
  position: absolute;
  top: 10px;
  left: 10px;
  width: 100%;
  height: 100%;
  border: 1px solid green;
  background-color: white;
  z-index: -1;
  
}
.buttonz{
   transform: rotateY(180deg);
}

   
<button>
<div class="buttonz">
  Button
</div>

</button>