带有过渡的伪元素后进行变换时的z索引问题

Question

我创建了以下按钮：

button{
  background-color:red;
  padding:10px 15px;
  border:none;
  transition:.5s;
  position:relative;
  color:white;
}

button:hover{
background-color:blue;
  transform:translate(5px,5px);
}

button:hover:after{
  bottom:0;
  right:0;
}

button:after{
  content: '';
  transition:.5s;
  position:absolute;
  bottom:-5px;
  right:-5px;
  z-index:-1;
  width:100%;
  height:100%;
  background-color:blue;
}

<button>test</button>

当我将鼠标悬停在按钮上方时，顶层（红色）似乎位于蓝色after伪元素下方。我该怎么做才能始终将红色层放在最上面？

Answer 1

您遇到了一个问题，因为变换creating a stacking context将伪元素移入内部，因此它不能再位于主要元素后面。

我建议您考虑其他因素，因为依赖于其父元素后面的伪元素可能会产生问题，因为伪元素可以位于其他元素之后。

这是一个基本示例，如果我在主体上添加背景，您会在其中看到伪元素，因为它位于主体后面。

button{
  background-color:red;
  padding:10px 15px;
  border:none;
  transition: .5s;
  position:relative;
  color:white;
  bottom: 0; 
  right: 0;
}

button:hover{
 bottom: -5px; 
 right: -5px;
}

button:hover:after{
  bottom:0;
  right:0;
}

button:after{
  content: '';
  transition:.5s;
  position:absolute;
  bottom:-5px;
  right:-5px;
  z-index:-1;
  width:100%;
  height:100%;
  background-color:blue;
}

body,html {
  background:#fff;
}

<button>test</button>

这是另一个想法，不需要伪元素，可以使用简单的box-shadow：

button{
  background-color:red;
  padding:10px 15px;
  border:none;
  transition: .5s;
  color:white;
  box-shadow:5px 5px 0 blue;
}

button:hover{
  box-shadow:0px 0px 0 blue;
  transform:translate(5px,5px);
}

<button>test</button>

---

关于伪元素的另一种想法，您必须同时使用它们：

button{
  background-color:none;
  padding:10px 15px;
  border:none;
  transition: .5s;
  color:white;
  position:relative;
  z-index:0;
}
button:before,
button:after {
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  bottom:0;
  background:red;
  z-index:-1;
}
button:before {
  background:blue;
  transform:translate(5px,5px);
  transition: .5s;
}

button:hover{
  transform:translate(5px,5px);
}
button:hover:before{
  transform:translate(0,0);
}

<button>test</button>

Answer 2

您可以为bottom和right属性设置动画以获得效果。

button{
  background-color:red;
  padding:10px 15px;
  border:none;
  transition: .5s;
  position:relative;
  color:white;
  bottom: 0; 
  right: 0;
}

button:hover{
 bottom: -5px; 
 right: -5px;
}

button:hover:after{
  bottom:0;
  right:0;
}

button:after{
  content: '';
  transition:.5s;
  position:absolute;
  bottom:-5px;
  right:-5px;
  z-index:-1;
  width:100%;
  height:100%;
  background-color:blue;
}

<button>test</button>