设置z-index后，::before/::after伪元素仍显示在a标签上方问题求助

架构老林

2026-7-12

解决方法

问题出在<a>标签设置的z-index: 2上——当给相对定位的元素设置z-index时，会创建一个独立的堆叠上下文。伪元素作为<a>的子元素，它们的z-index只能在这个上下文内部生效，无法突破到父元素的下方。

修正步骤：

移除<a>标签的z-index: 2属性
将伪元素的z-index改为-1

修正后的代码如下：

CSS代码

a{
    padding:1rem 1.5rem;
    background-color:whitesmoke;
    border-radius:12px;
    text-decoration:none;
    font-size:1.1rem;
    color:black;
    position:relative;
    /* 移除z-index:2 */
    user-select:none;
    cursor:pointer;
}
a:hover::after{
    content:'';
    position:absolute;
    height:50%;
    width:50%;
    bottom:2px;
    right:3px;
    box-shadow:5px 5px 40px 10px rgb(142, 224, 231);
    transition:all 0.5s;
    animation:shinny2 1s ease-in 1;
    animation-fill-mode:forwards;
    z-index: -1; /* 修改为-1 */
}
a:hover::before{
    content:'';
    position:absolute;
    z-index:-1; /* 修改为-1 */
    height:50%;
    width:50%;
    top:2px;
    left:3px;
    box-shadow:-5px -5px 40px 10px rgb(142, 224, 231);
    animation:shinny1 1s ease-in 1;
    animation-fill-mode:forwards;
}

/* 补充原代码缺失的动画关键帧，可根据需求自定义样式 */
@keyframes shinny1 {
    to {
        /* 例：top: 0; left: 0; */
    }
}
@keyframes shinny2 {
    to {
        /* 例：bottom: 0; right: 0; */
    }
}