Изменение цвета плавно слева направо по наведению

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

Теперь моя цель состоит в том, чтобы сделать цвет изменение линии плавно слева направо. Но так, как я его написал, он просто меняет цвет гладко. Я хочу дать ему направление, есть ли простой способ сделать это?

Спасибо.

EDIT: Я ищу поведение, подобное this. Просто чтобы у вас сложилось впечатление, как это должно выглядеть.

Answer 1

Линейный градиент (цвет1, цвет2), что вы ищете?

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