Html 悬停按钮，从左到右填充：after

当我将鼠标悬停在按钮上时，框会填满，但文本不会显示，我相信这是因为背景在上面。我怎样才能解决这个问题

我们设计和开发
我们是一个新的设计工作室，总部设在美国。我们有超过20年的综合经验，并知道一两件事有关设计网站和移动应用程序

.banner a{
背景：无；
填充：20px 35px；
颜色：#10c9c3；
字体系列：“蒙特塞拉特”，无衬线；
边框：2个实心#10c9c3；
过渡：0.3s；
位置：相对位置；
}
.banner a:悬停，.banner a:活动{
颜色：白色；
}
.横幅a：之后{
内容：''；
位置：绝对位置；
过渡：均为0.3秒；
宽度：0%；
身高：100%；
排名：0；
左：0；
颜色：白色；
z指数：0；
}
.横幅a：悬停：之后{
宽度：100%；
背景：#10c9c3；
}

---

为您的背景设置z-index为-1，它应该在

标记下

.banner a:after {
    ...

    z-index: -1;
}

在您的实现背景中，在上面的

标记中进行渲染

尝试以下方法：

.banner a:after {
    ...

    z-index: -1;
}

    .banner a {
    background: linear-gradient(to right, #10c9c3 50%, white 50%);
    background-size: 200% 100%;
    background-position: right bottom; 
    padding: 20px 35px;
    color: #10c9c3;
    font-family: 'Montserrat', sans-serif;
    border: 2px solid #10c9c3;
    transition: all 0.3s ease-out;
    position: relative;
}

.banner a:hover, .banner a:active {
    color: white;
    background-position: left bottom;
}

---

预览：

但仍然没有

HTML

包含…当我添加z索引时：-1；背景没有出现。这是一个工作示例，我有完全相同的代码，但它不工作。（我在顶部添加了HTML）你能看看devtools吗，也许有些样式覆盖了z-index属性？