问CSS动画-在鼠标输入上从左到右绘制线条，然后在鼠标左键上从左到右消失

EN

我正试着在“mouseenter”上画一条从左到右下划线的动画，然后在“mouseleave”上从左到右消失，而不是从右到左消失。

我正在尝试实现的示例(但使用动画，而不是过渡)：

https://jsfiddle.net/1gyksyoa/

我试着反转“绘图”动画，但这并没有达到我想要实现的效果。

        @keyframes draw-reverse {
      100% {
        width: 0;
        background-color: red;
      }

      0% {
        width: 47px;
        background-color: red;
      }

}

我把这些放在一起是为了更好地理解这个问题；

https://jsfiddle.net/Lq560be9/

目前，我在'mouseenter‘上设置了从左到右的线条动画，但在'mouseleave’上，它从右到左消失了，而我正在尝试让线条也从左到右消失。