悬停时，线条应从左到右变为红色.当删除鼠标时，它应该反转

Question

CSS 动画，需要帮助，悬停时，行应从左到右开始变为红色。当删除鼠标时，它应该反转。

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>