修改按钮background为非透明色后hover滑动效果失效，如何调整代码？

• 原有代码伪元素选择器存在多余空格，如.button-main :before，会错误匹配按钮子元素的伪元素而非按钮自身的伪元素，本身就存在逻辑问题
• 两个伪元素的z-index设为-1、-2，层级低于按钮本身，当按钮设置非透明背景时，按钮自身的背景会完全遮挡住下层的伪元素，导致滑动效果不可见
• 多处hover与伪元素的组合选择器存在语法错误，如.button-main :hover: after存在多余空格，导致选择器匹配失效

1. 修复所有选择器的语法错误，删除多余空格，伪元素统一使用双冒号的标准写法
2. 调整层级逻辑：按钮自身保持background: transparent，如果需要修改按钮默认背景色，直接修改::before伪元素的background属性即可
3. 给按钮添加isolation: isolate属性，避免负层级的伪元素溢出到按钮外部影响页面其他元素
4. 修正原有hover状态下的伪元素过渡逻辑，以及字体属性里的多余空格问题

<button class="button-main slide">Slide Left</button>

<style>
.button-main{
  color: black; 
  outline: none;
  /* 按钮自身始终保持透明，默认背景色改到::before伪元素上设置 */
  background: transparent;
  border: none;
  letter-spacing: 0.0625em;
  padding: 8px 10px; 
  text-transform: uppercase;
  font: bold 16px 'Bitter', sans-serif; 
  line-height: 2;
  position: relative;
  display: inline-block;
  margin-right: 20px;
  margin-bottom: 20px;
  cursor: pointer;
  text-decoration: none; 
  overflow: hidden;
  transition: all .5s;
  /* 隔离内部负层级元素，避免影响外部 */
  isolation: isolate;
}

/* 删除选择器中间的多余空格，用双冒号写伪元素 */
.button-main::before,
.button-main::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  height: 100%;
  background: #259f6c; 
  z-index: -1;
  transform: translate3D(0,-100%,0); 
  transition: all .5s;
}

.button-main::before {
  /* 要改按钮默认背景色，直接修改这里的background值即可，比如改成red */
  background: #fafcd6; 
  z-index: -2;
  transform: translate3D(0,0,0);
}

.button-main:hover {
    color: white;
}

/* 修复选择器语法错误 */
.button-main:hover::after {
  transform: translate3D(0,0,0);
  transition: all .5s;
}

.slide::after {
  top: 0;
  z-index: -1;
  transform: translate3D(-101%,0,0);
}

.slide:hover::after {
  transform: translate3D(0,0,0);
  transition: all .5s;
}
</style>

后续如果需要修改按钮默认背景色，只要修改.button-main::before的background属性即可，不需要改动按钮自身的background设置，滑动效果可以正常生效。

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