ホバー上では、赤色の線が左から右に向かいます。削除マウスはそれが

Question

CSS animation, help requred, On hover, line should turn red start from left to right. When remove mouse it should reverse.

https://i.stack.imgur.com/dct34.png

Answer 1

を逆にすべきであるときあなたはこれを試すことができます。

ul { 
 
    margin:0px; 
 
    padding:0px; 
 
    list-style:none; 
 
} 
 
ul li { 
 
    display:block; 
 
} 
 
ul li a { 
 
    text-decoration:none; 
 
    padding:10px; 
 
    position:relative; 
 
    transition:all 0.3s linear 
 
} 
 
ul li a:hover { 
 
    text-decoration:none; 
 
} 
 
ul li a:after { 
 
    content:''; 
 
    display:block; 
 
    position:absolute; 
 
    left:0px; 
 
    bottom:0px; 
 
    width:0px; 
 
    height:1px; 
 
    background:tomato; 
 
    transition:all 0.3s linear 
 
} 
 
ul li a:hover:after { 
 
    width:100%; 
 
}

<ul> 
 
<li><a href="#">Home</a></li> 
 
</ul>

あなたのマークアップを試してみました