Line-through animation on hover (incomplete)

I'm fairly new to css animations. I want to have an effect where if I hover over the element the line-through slowly disappears from right to left. I already gathered all of this but when the page loads the effect already begins. So when I hover over it nothing happens and I don't really know where to put the hover in the code. Also how do I make sure that when I don't hover over it anymore the line through fills back up?

@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; 
}

Thanks in Advance

I played around with your code and I think I found the solution.

.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; 
}

Here's the CodePen: https://codepen.io/AjayKudva/pen/WKKxWQ