Animate pseudo element on hover - html

Question

I have an input with a pseudo element that I'm trying to animate on hover.. I wanted the white line on the input to infinitely scroll to the right out of view and come back in on the left etc.. Is this possible?
.buttonWrap {
position: relative;
}
.buttonWrap:before {
content: '';
width: 20px;
border-bottom: solid 2px #fff;
position: absolute;
top: 50%;
right: .5rem;
transform: translateY(-50%);
}
.buttonWrap:hover::before {
animation: J 1s ease 0s infinite normal none;
}
.uiBtn.redBtn {
background: #1a1a1a;
text-transform: uppercase;
text-align: left;
color: #fff;
min-width: 16.25rem;
font-size: .6875rem;
cursor: pointer;
letter-spacing: 1px;
line-height: 1rem;
width: auto;
margin-top: 2rem;
font-weight: 600;
padding:10px;
}
<span class="buttonWrap">
<input type="submit" class="uiBtn redBtn" value="Submit">
</span>

Answer 1

An example using transform property (I've slow down the duration just to check the fluidity)
.buttonWrap {
position: relative;
}
.buttonWrap:before {
content: '';
width: 20px;
border-bottom: solid 2px #fff;
position: absolute;
top: calc(50% - 1px);
right: .5rem;
}
.buttonWrap:hover::before {
animation: J 5s linear 0s infinite;
}
.uiBtn.redBtn {
background: #1a1a1a;
text-transform: uppercase;
text-align: left;
color: #fff;
min-width: 16.25rem;
font-size: .6875rem;
cursor: pointer;
letter-spacing: 1px;
line-height: 1rem;
width: auto;
margin-top: 2rem;
font-weight: 600;
padding:10px;
}
#keyframes J {
0% { transform: translateX(0); right: .5rem; }
10% { transform: translateX(calc(100% + .5rem)); right: .5rem; }
10.01% { transform: translateX(-100%); right: 100%; }
93% { transform: translateX(-100%); right: .5rem; }
}
<span class="buttonWrap">
<input type="submit" class="uiBtn redBtn" value="Submit">
</span>

Answer 2

FYI; here's what ended up working for me! .. animation happens when you hover over the button..
.underline::after {
content: "";
height: 2px;
display: inline-block;
position: absolute;
left: 0;
width: 30px;
top:50%;
background: #fff;
transition: all;
}
.underline {
position: absolute;
right: .5rem;
top: 50%;
width: 30px;
}
.underlined-animated:hover .underline::after {
animation: underline-animated 1s infinite;
width: auto;
animation-delay: -.5s;
}
.underlined-animated {
position: relative;
}
#keyframes underline-animated {
0% {
right: 100%;
}
50% {
right: 0;
left: 0;
}
100% {
right: 0;
left: 100%;
}
}
.uiBtn.redBtn {
background: #1a1a1a;
text-transform: uppercase;
text-align: left;
color: #fff;
min-width: 16.25rem;
font-size: .6875rem;
cursor: pointer;
letter-spacing: 1px;
line-height: 1rem;
width: auto;
margin-top: 2rem;
font-weight: 600;
padding:10px;
}
<span class="underlined-animated">
<span class="underline"></span>
<input type="submit" class="uiBtn redBtn" value="Submit">
</span>