::after伪元素hover状态异常：离开hover时显示于父元素上方

问题根源在于hover状态下用display: none隐藏伪元素——这个属性无法触发过渡效果，退出hover时伪元素会突然重新渲染，再加上父元素的transform创建了新的堆叠上下文，导致伪元素短暂出现在父元素上方。

修复方案 #

放弃display: none，改用支持过渡的属性（transform+opacity）控制伪元素的显示隐藏，同时给伪元素添加过渡效果，保证状态切换平滑，且始终处于父元素后方：

.btn-sound {
  cursor: pointer;
  padding: 5px 10px;
  border: 2px solid black;
  position: relative;
  background: #FF3F76;
  transition: all 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn-sound::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -6px;
  bottom: -6px;
  width: 100%;
  height: 100%;
  background-color: transparent;
  border: 2px solid #009792;
  /* 同步父元素过渡曲线，保证动画连贯 */
  transition: all 0.275s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.btn-sound:hover {
  -webkit-transform: translateX(-5px) translateY(6px);
  -ms-transform: translateX(-5px) translateY(6px);
  -o-transform: translateX(-5px) translateY(6px);
  transform: translateX(-5px) translateY(6px);
  background: #009792;
}

.btn-sound:hover::after {
  /* 反向位移+淡出替代display:none，保持过渡效果 */
  transform: translateX(5px) translateY(-6px);
  opacity: 0;
}

改动说明 #

1. 给.btn-sound::after添加过渡属性，让伪元素的状态切换和父元素动画同步。
2. 用反向位移和透明度过渡隐藏伪元素，避免display: none导致的突然渲染问题，同时伪元素始终保持z-index: -1的层级，稳定处于父元素后方。

HTML部分无需修改：

<li class="btn-sound">
  <a href="index.html">
    <p class="text-button">Home</p>
  </a>
</li>

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