Question

目标：在纯CSS中使用悬停按钮效果很好，纯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 s），因为这是一个已经运行的网站，客户决定改变行为按钮，我在这里。这个网站上有很多按钮，所以这就是为什么我想找到伪元素的解决方案，因为试图找到每个按钮并改变它们是不合适的。

Answer 1

考虑另一种做背景色转换的方法。

见in this edited demo：

/* remove all references to .button::before */
.button {
    background-image: linear-gradient(to bottom,
        transparent, transparent 100%,
        red 100%, red);
    transition: background-image 0.5s ease 0s;
}
/* the "gradient" above has the practical result of being fully transparent,
   but it has been carefully crafted so that the transition gives the desired result */
.button:hover {
    background-image: linear-gradient(to bottom,
        transparent, transparent 0%,
        red 0%, red);
}

您可以转换小工具，在这种情况下，它是逐个停止的。第一站和最后一站不会改变，但是中间两站从100%过渡到0%，这实际上意味着transparent和red之间的截止点从按钮底部到顶部，给出你想要的效果。

您现在可以用所需的背景颜色替换transparent。

*您可能需要从z-index:-1元素中删除::after才能恢复边框效果。

Answer 2

如果我理解你，这就是你要找的东西：

＆＃13;

.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%;
}

＆＃13;

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

＆＃13;

Answer 3

你可以做点什么，

HTML

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

CSS

body {
    background: #FF7272;
}
.button {
    display: inline-block;
    position: relative;
    height: 35px;
    line-height: 35px;
    padding: 0 15px;
    text-decoration: none;
    color: black;
    z-index: 0;
    background-color: white;
    width: 50px;
}
.button::before, .button::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
}
.button::after {
    content: "TEST";
    height: 50%;
    width: 72px;
    text-align: center;
    z-index: 2;
    line-height: 0.2;
    border-left: 4px solid red;
    border-right: 4px solid red;
    border-bottom: 4px solid red;
}
.button::before {
    height: 0%;
    background-color: red;
    transition: all 0.5s ease 0s;
    z-index: 1;
}
.button:hover::before {
    height: 100%;
}

示例：https://jsfiddle.net/LL0f7rwp/6/

有些值是硬编码的，但希望你能从中得到一个想法：）

Answer 4

这是因为z-index: -1和background-color: white会将您的:before和:after元素推到下面。

从z-index: -1和:after移除:before并添加到悬停.button:hover::before
在悬停时制作background-color: transparent。 Updated fiddle.

＆＃13;

body {
  background: #FF7272;
}
.button {
  display: inline-block;
  position: relative;
  height: 35px;
  line-height: 35px;
  padding: 0 15px;
  background-color: white;
  text-decoration: none;
  color: black;
}
.button::before,
.button::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
}
.button::after {
  height: 50%;
  border: 4px solid red;
  border-top: 0;
}
.button::before {
  height: 0%;
  background-color: red;
  transition: all 0.5s ease 0s;
}
.button:hover::before {
  height: 100%;
  z-index: -1;
}
.button:hover {
  background-color: transparent;
}

＆＃13;

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

＆＃13;

在CSS中使用文本重叠::之后和::之前

4 个答案: