CSS ::before/::after伪元素z-index层级不生效问题排查

给button元素设置position: relative同时声明z-index: 2，会让按钮生成独立的层叠上下文。此时::before伪元素作为按钮的子元素，它的z-index只在按钮的层叠上下文内部生效：按钮自身的文字内容属于层叠上下文的内容层，只要伪元素的z-index大于等于0，就一定会覆盖在按钮文字上方，不管怎么调整z-index数值都不会跑到文字下面。

最简单的改法是删除按钮上的z-index: 2属性，同时把伪元素的z-index改为-1即可。修改后按钮不会生成独立层叠上下文，z-index为-1的伪元素会自动排在按钮内容层下方，不会遮挡文字。

修正后的核心CSS代码：

button{
  border: 1px solid black;
  background-color:white;
  color:black;
  padding:20px 50px;
  position:relative;
  /* 移除原有的z-index: 2 声明 */
}
button::before{
  content:"";
  left:0;
  top:0;
  z-index: -1; /* 改为-1 */
  height:100%;
  width: 100%;
  background-color:yellow;
  position:absolute;
}

如果因为业务场景必须给按钮保留z-index属性，可以额外给按钮文字套一层行内标签，单独给文字设置更高的层级：

<button type="button" ><span>Hover</span></button>

button span{
  position: relative;
  z-index: 2;
}

如果要实现从角落扩散的悬停动画，可以给伪元素加上过渡和初始缩放值：

button::before{
  content:"";
  left:0;
  top:0;
  z-index: -1;
  height:100%;
  width: 100%;
  background-color:yellow;
  position:absolute;
  /* 初始状态缩放为0，从左上角开始扩散，修改transform-origin可以调整扩散起点 */
  transform: scale(0);
  transform-origin: left top;
  transition: transform 0.3s ease;
}
button:hover::before{
  transform: scale(1);
}

内容的提问来源于stack exchange，提问作者Shekhar lohach