Css 悬停时的直线动画（不完整）

我对css动画相当陌生。我想要一个效果，如果我把鼠标悬停在元素上，穿过的线会从右向左慢慢消失。我已经收集了所有这些，但是当页面加载时，效果已经开始。因此，当我将鼠标悬停在它上面时，什么都不会发生，我也不知道将鼠标悬停在代码中的什么地方。还有，我如何确保当我不再将鼠标悬停在它上面时，通过的线会重新填充

@keyframes subMenu{
 0%   { width : 100; }
 100% { width: 0; }
}
.subMenu {
position: relative;
}
.subMenu:after {
content: ' ';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background: black;
animation-name: subMenu;
animation-duration: 4s;
animation-timing-function: linear;
animation-iteration-count: 1;
animation-fill-mode: forwards; 
}

---

提前感谢

我使用了您的代码，我想我找到了解决方案

.subMenu:after {
  content: ' ';
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: black;
}
.subMenu:hover:after{
    animation-name: subMenu;
  animation-duration: 4s;
  animation-timing-function: linear;
  animation-iteration-count: 1;
  animation-fill-mode: forwards; 
}

---

这是密码笔：

这个问题有点模糊，因为我无法想象你正在经历什么。请分享代码笔，以便我们更好地了解。我想你也用了：after-here。我认为您必须使用：hover才能产生效果。下面是问题的gif说明：您是否尝试了：hover而不是：after？将所有动画内容放在。子菜单中：悬停。是的，但它确实不起作用，我会继续尝试。你能分享项目代码笔吗？这样我就可以玩代码了？谢谢Ajay，还有最后一个细节。如果我希望动画在不再悬停时反转。我应该使用：before选择器吗？因为现在当我停止在它上面悬停时，它会立即重新填充。我不认为只有CSS就可以做到这一点。当网页加载时，你想让它在没有任何动画的情况下通过。然后当你们悬停时，线必须消失。但在mouseout操作中，它必须执行相反的操作。这将导致以下方式：当页面加载行时，将看到通过文本设置动画。你觉得这样行吗？如果你觉得答案有用，也要投票并接受。