Here is a simple code snippet for creating a line that changes color on hover:
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: '';
}
I am looking to achieve a smooth color change effect from left to right. Currently, the code I have smoothly transitions the color without any directional movement. Is there an easy way to make this change in the desired direction?
Thank you.
EDIT: To better illustrate my goal, I'm aiming for a behavior similar to this example. This should give you an idea of how I want it to appear.