在悬停时从左到右流畅地改变颜色

Question

这是我的简单代码:

li::after {
  height: 2px;
  display: block;
  background: rgb(195, 195, 195);
  border-right: 1px white;
  content: '';
}

li:hover:after {
   position: relative;
   transition: 3s ease;
   height: 2px;
   display: block;
   background: rgb(34, 130, 193);
   border-right: 1px white;
   content: '';
}

现在我的目标是使线条从左到右平滑地改变颜色。但是我写它的方式只是平滑地变换颜色。我想给它一个方向有什么简单的方法吗?

谢谢。

编辑:我正在寻找这样的行为。只是给你一个印象，它应该是什么样子

Answer 1

是线性梯度(color1, color2)你正在寻找什么?

http://www.w3schools.com/css/css3_gradients.asp