css - 在伪元素上重新加载每个页面后，Z-index 会导致奇怪的重影效果

Question

目标

---

面临的问题

每次我重新加载页面时，都会出现这个黑色填充。（转换工作正常，但我想了解导致此问题的原因）我能够弄清楚这是由于 Z-index 属性

---

代码

按钮元素代码

        #btn3{
        position: relative;
        transition: 0.5s ease-out;
        z-index: 0;
    }
    #btn3::after{
        content: '';
        position: absolute;
        width: 100%;
        height: 0%;
        background-color: orange;
        bottom: 0;
        left: 0;
        z-index: -1;
        transition: 0.5s ease-in-out;
        border-radius: 10px;
    }
    #btn3:hover::after{
        height: 100%;
    }

---

标签： csshovercss-transitionsz-indexpseudo-element