文字颜色填充CSS过渡

Question

将鼠标悬停在文本上时，我一直在尝试获得颜色填充的效果，但未成功。

的HTML

<a href="#" data-hover="Fill Color On Text">Fill Color On Text</a>

的CSS

a {
  color: #000;
  text-decoration: none;
  transition: all 0.5s;
  position: relative;
  overflow: hidden;
  display: block;
  backface-visibility: hidden;
  background: white;
  font-size:40px;

}

a:before {
  content: attr(data-hover);
  position: absolute;
  color: red;
  left: -100%;
  transition: all 0.5s;
  background: white;
    backface-visibility: hidden;
}
a:hover:before {
  left: 0;
}

演示

Answer 1

与现有的标记，你只是过渡属性更改为width代替

body {
  font-size: 40px;
}
a {
  color: #000;
  text-decoration: none;
  position: relative;
  display: block;
  font-size:40px; 
}
a:before {
  content: attr(data-hover);
  position: absolute;
  color: red;
  left: 0;
  width: 0;
  transition: width 1s;
  overflow: hidden;
  white-space: nowrap;
}
a:hover:before {
  width: 100%;
}

<a href="#" 
   data-hover="Fill Color On Text">Fill Color On Text</a>

如果您同时使用两个伪元素，则不必两次编写文本

body {
  font-size: 40px;
}
a {
  color: #000;
  text-decoration: none;
  position: relative;
  display: block;
  font-size:40px; 
}
a:before {
  content: attr(data-hover);
}
a:after {
  content: attr(data-hover);
  position: absolute;
  color: red;
  left: 0;
  width: 0;
  transition: width 1s;
  overflow: hidden;
  white-space: nowrap;
}
a:hover:after {
  width: 100%;
}

<a href="#" 
   data-hover="Fill Color On Text"></a>