悬停时从左到右平滑地改变颜色

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: '';
}

现在我的目标是让线条从左到右平滑地变色。但是我写它的方式只是平滑地改变颜色。我想给它一个方向是否有任何简单的方法来做到这一点？

感谢。

编辑：我正在搜索this之类的行为。只是给你一个印象应该是什么样的。

Answer 1

您正在寻找线性渐变（color1，color2）吗？

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