伪元素动画

Question

我正在尝试使该行从行的开头开始动画，并在行的开头重新进入。目前，它从右边的按钮发出动画，然后从左边返回但是有可能改为在其原始位置的末尾进行动画处理，然后在其原始位置的开始处进行动画处理吗？

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