带有 ::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;

    }
}

但这渲染的东西看起来有点不同：

更右边的矩形是我的 :after 元素。它确实在文本 «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>

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

Button styling with ::after pseudo element

css

button

css-selectors

pseudo-element