CSS悬停按钮效果问题：z-index与文本颜色异常

问题根源 #

1. 你定义了.container a span的层级样式，但HTML里的捐赠按钮文本没有用<span>包裹，导致该样式完全不生效。
2. 即使span存在，伪元素::before/::after作为锚点a的子元素，和span处于同一堆叠上下文，其box-shadow会默认覆盖在文本上方。

修复方案 #

• 给按钮文本添加<span>标签，让层级控制样式生效
• 给伪元素设置z-index: -1，将它们置于span下方
• 确保悬停时文本颜色足够清晰

修改后的完整代码 #

CSS代码

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}

.container a {
  position: relative;
  display: inline-block;
  padding: 15px 30px;
  border: 2px solid #0f0;
  text-decoration: none;
  font-weight: 650;
  color: #fff;
  margin: 5px;
  letter-spacing: 0.45px;
  -webkit-box-reflect: below 0px linear-gradient(transparent, #0002);
  transition: 0.5s;
  transition-delay: 0s;
}

.container a:hover {
  color: #000;
}

/* 现在span存在，该样式会生效 */
.container a span {
  position: relative;
  z-index: 100;
}

.container a::before {
  content: "";
  position: absolute;
  left: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: #0f0;
  box-shadow: 5px -8px 0 #0f0, 5px 8px 0 #0f0;
  transition: width 0.5s, left 0.5s, height 0.5s, box-shadow 0.5s;
  transition-delay: 1s, 0.5s, 0s, 0s;
  z-index: -1; /* 让伪元素在span下方 */
}

.container a:hover::before {
  width: 60%;
  height: 100%;
  left: -2px;
  box-shadow: 5px 0 0 #0f0, 5px 0 0 #0f0;
  transition-delay: 0s, 0.5s, 1s, 1s;
}

.container a::after {
  content: "";
  position: absolute;
  right: -20px;
  top: 50%;
  transform: translateY(-50%);
  width: 20px;
  height: 2px;
  background: #0f0;
  box-shadow: -5px -8px 0 #0f0, -5px 8px 0 #0f0;
  transition: width 0.5s, right 0.5s, height 0.5s, box-shadow 0.5s;
  transition-delay: 1s, 0.5s, 0s, 0s;
  z-index: -1; /* 让伪元素在span下方 */
}

.container a:hover::after {
  width: 60%;
  height: 100%;
  right: -2px;
  box-shadow: -5px 0 0 #0f0, -5px 0 0 #0f0;
  transition-delay: 0s, 0.5s, 1s, 1s;
}

HTML代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <link href="index.css" rel="stylesheet" />
  </head>
  <body>
    <div class="header-container">
      <header class="main-header">
        <h1 class="logo">Animal Charity</h1>

        <nav class="nav-links">
          <a class="menu-link1" href="">About us</a>
          <a class="menu-link2" href="">Our Work</a>
          <a class="menu-link3" href="">Success Stories</a>
          <a class="menu-link4" href="">Shop</a>
          <a class="menu-link5" href="">Contact us</a>
          <div class="container">
            <!-- 给Donate添加span标签 -->
            <a class="donate" href=""><span>Donate</span></a>
          </div>
        </nav>
      </header>
    </div>
  </body>
  <footer></footer>
</html>

额外说明 #

• 修正了.container a::after里的过渡属性，把无效的left改成right，确保过渡动画正常触发
• 伪元素设置z-index: -1后，既不会遮挡文本，又能完整显示绿色高亮效果

内容的提问来源于stack exchange，提问作者CoderMan