CSS按钮hover时::before伪元素覆盖内容的修复咨询

问题根源：当给.button-class添加transform: scale(1.05)的hover效果时，该元素会创建新的堆叠上下文。此时伪元素设置的z-index: -1仅在这个新堆叠上下文内生效，导致伪元素反而覆盖在按钮内容上方。

方案一：给父元素显式设置z-index #

给.button-class添加z-index: 1，让伪元素的z-index: -1相对于父元素的堆叠上下文正常生效，伪元素会被压在按钮下方。

修改后的完整CSS代码：

.button-class{
   background-color: #0f0f2c;
   box-shadow: 0 0 3px #ff00cc; 
   border: none;
   border-radius: 8px; 
   cursor: pointer;
   position: relative;
   z-index: 1; /* 新增：显式设置父元素堆叠层级 */
}

.button-class:hover {
    transform: scale(1.05);
}
.button-class::before{
    content: "";
    position: absolute;
    inset: -1px;
    box-shadow: 0 0 2px #333399,
    0 0 2px #ff00cc,
    0 0 1px #fffb00,
    0 0 2px #00f0ff,
    0 0 15px #333399;
    background-image: conic-gradient(#333399, #ff00cc, #fffb00, #00f0ff, #333399 );
    background-color: #f0c0ff;
    border-radius: 22px;
    z-index: -1;
}

方案二：将缩放效果移到伪元素上 #

把hover时的transform: scale(1.05)从父元素移到伪元素上，避免父元素创建新堆叠上下文，伪元素的层级关系会保持正常。

修改后的完整CSS代码：

.button-class{
   background-color: #0f0f2c;
   box-shadow: 0 0 3px #ff00cc; 
   border: none;
   border-radius: 8px; 
   cursor: pointer;
   position: relative;
}

.button-class:hover::before {
    transform: scale(1.05); /* 将缩放效果移到伪元素 */
    transition: transform 0.3s; /* 可选：添加平滑过渡动画 */
}
.button-class::before{
    content: "";
    position: absolute;
    inset: -1px;
    box-shadow: 0 0 2px #333399,
    0 0 2px #ff00cc,
    0 0 1px #fffb00,
    0 0 2px #00f0ff,
    0 0 15px #333399;
    background-image: conic-gradient(#333399, #ff00cc, #fffb00, #00f0ff, #333399 );
    background-color: #f0c0ff;
    border-radius: 22px;
    z-index: -1;
}

两种方案可选：

• 方案一适合需要按钮整体（内容+背景）一起缩放的场景
• 方案二仅让发光背景缩放，按钮内容保持原大小，适合侧重背景动效的场景

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