CSS按钮hover时::before伪元素层级过高覆盖主体如何修复？

问题根源 #

你遇到的问题是CSS层叠上下文规则导致的：当元素的transform属性不为none时，浏览器会自动为该元素创建新的层叠上下文。此时你给::before伪元素设置的z-index: -1不再相对于页面根层叠上下文生效，而是相对于button自身的层叠上下文排序，按照层叠顺序规则，负z-index的子元素会显示在父元素的背景上方，因此出现伪元素盖住按钮主体的问题。

解决方法 #

只需要给button元素新增一行isolation: isolate属性即可，该属性会主动创建隔离的层叠上下文，保证内部负z-index的元素永远渲染在父元素下方，不需要修改其他原有逻辑：

button {
  padding: 0.7em 1em;
  font-size: 25px;
  text-transform: uppercase;
  font-weight: 600;
  border: 5px solid #191919;
  border-radius: 0;
  background-color: rebeccapurple;
  color: #fff;
  position: relative;
  /* 新增以下代码 */
  isolation: isolate;
}

你也可以选择给button显式设置z-index: 1实现相同效果，两种方案都兼容所有现代浏览器。

内容的提问来源于stack exchange，提问作者Adarsh Dubey