css - 用循环从左到右为文本加下划线

Question

我一直在尝试在这个网站上做同样的文字下划线效果

https://themads.agency/（点击汉堡菜单时的链接）

到目前为止，我可以在悬停时画下划线，但我如何让它重复？

.HvrUnderline{
position:relative;
text-decoration:none;
display:inline-block;
}
.HvrUnderline:after {
    display: block;
    content: '';
    border-bottom: solid 3px #F16A70;
    transform: scaleX(0);
    transition: transform 250ms ease-in-out;
    transform-origin: 100% 50%
}
.HvrUnderline:hover:after {
    transform: scaleX(1);
    transform-origin: 0 50%;
}

任何帮助深表感谢

标签： csscss-animations