对跨度的悬停填充文本效果

Question

我正在尝试通过从左到右逐渐填充鼠标来更改悬停链接的颜色。但是，它似乎没有用，只是立即填充了文字？

我正在尝试做到这一点，以便当有人将鼠标悬停在li上时，span的填充会开始

body {
  background-color: #000;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #999;
  font-size: 40px;
}

.navbar_wrapper-li {
  display: block;
  flex: 0 1 auto;
  user-select: none;
}

span {
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
}

.navbar_wrapper-li:hover span:before {
  width: 0;
  color: #FFFFFF;
  overflow: hidden;
  position: absolute;
  content: attr(data-text);
  transition: all 0.9s;
}

.navbar_wrapper-li:hover span:hover:before {
  width: 100%;
}

<ul class="navbar_wrapper-ul">
  <li class="navbar_wrapper-li">
    <a class="nav-link active" href="#">
      <span data-text="Home">Home</span>
    </a>
  </li>
</ul>

Answer 1

您只是在hover而不是li和span上使用，因为悬停在li和span上是冲突的

body {
  background-color: #000;
}

ul {
  list-style-type: none;
}

a {
  text-decoration: none;
  color: #999;
  font-size: 40px;
}

.navbar_wrapper-li {
  display: block;
  flex: 0 1 auto;
  user-select: none;
}

span {
  left: 50%;
  top: 50%;
  position: absolute;
  transform: translate(-50%, -50%);
  display: block;
}

.navbar_wrapper-li span:before {
  width: 0;
  color: #FFFFFF;
  overflow: hidden;
  position: absolute;
  content: attr(data-text);
  transition: all 0.9s;
}

.navbar_wrapper-li span:hover:before {
  width: 100%;
}

<ul class="navbar_wrapper-ul">
  <li class="navbar_wrapper-li">
    <a class="nav-link active" href="#">
      <span data-text="Home">Home</span>
    </a>
  </li>
</ul>

Answer 2

另一个想法是考虑使用渐变的背景色，但是您将拥有less support：

.box {
  background: 
    linear-gradient(grey,grey) left no-repeat,
    #fff;
  background-size:0% 100%;
  font-size:40px;
  display: inline-block;
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  transition: 0.5s;
}
.box:hover {
  background-size:100% 100%;
}

body {
 padding:50px 0;
 text-align:center;
 background:#000;
}

<div class="box">
Home
</div>