html - Overlap::after 和::before 与 CSS 中的文本

Question

目标:在纯 CSS 中制作悬停按钮的漂亮效果，这将使用 ::after 和 ::before 伪元素。看看这个<强>jsFiddle 例子看看，我想达到什么目的。

代码:按钮将有一些样式，还有一个 background-color，在这个例子中是关闭的。

.button {
    display: inline-block;
    position: relative;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    /*background-color: white;*/
    text-decoration: none;
    color: black;
}

问题:我想使用background-color，当我启用它时，我看不到伪元素。是这样的，因为这些伪元素有z-index: -1;，把它们放在了背景后面。当我将 z-index 更改为 0 或 1 时，文本不可见。

我不能做什么:我不能在按钮内添加新元素(如 span)，因为这是一个已经在运行的网站，客户决定改变按钮的行为，所以我来了。这个网站上有很多按钮，这就是为什么我想用伪元素找到解决方案的原因，因为试图找到每个按钮并更改它们是不合适的。

Answer 1

如果我理解你的话，这就是你要找的:

.button {
    display: inline-block;
    position: relative;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    /*background-color: white;*/
    text-decoration: none;
    color: black;
	border:1px solid;
}
a.button:before {
    content: " ";
    display: block;
    z-index: -1;
    position: absolute;
    height: 0%;
    top: 0;
    right: 0;
    left: 0;
    background: #ddd;
	transition: height 0.2s ease;
}

a.button:hover:before {
	height:100%;
}

<a href="#" class="button">TEST</a>