Html 如何从鼠标右键设置下划线宽度的动画？

我的菜单上有这个CSS下划线动画效果代码。 我想对它做一个小小的改变——我需要它以与打开相同的方式关闭，只是向后。现在它从左到右打开，从两边到中间关闭，我需要它从右到左关闭

谢谢

守则：

#header-outer header#top nav >ul ul li a { display: inline-block; }

#header-outer header#top nav >ul ul li a:after {
    transition: transform .3s ease-out,border-color .3s ease-out;
    transform-origin: 100% 50%
    position: absolute;
    display: block;
    -ms-transform: scaleX(0);
    -webkit-transform: scaleX(0);
    transform: scaleX(0);
    border-top: 2px solid #fff;
    content: '';
}

#header-outer header#top nav >ul ul li a:hover:after {
    transform: scaleX(1);
    transform-origin: 0 50%;
}

body [data-dropdown-style="minimal"] .sf-menu >li >ul { box-shadow: none !important; }

header#top .sf-menu li ul li a:hover,
html body[data-dropdown-style="minimal"] #header-outer:not([data-format="left-header"]) header#top nav > ul > li:not(.megamenu) ul a:hover {
  background-color: transparent !important;

---

我制作了这个简单的边界动画，我认为它将帮助您归档您的目标

ullia{ 显示：内联块； } ul li a：之后{ 内容：； 显示：块； 宽度：0； 高度：2倍； 背景：2000人； 过渡：宽度3s； } ul li a：悬停：之后{ 宽度：100%； }

---

我制作了这个简单的边界动画，我认为它将帮助您归档您的目标

ullia{ 显示：内联块； } ul li a：之后{ 内容：； 显示：块； 宽度：0； 高度：2倍； 背景：2000人； 过渡：宽度3s； } ul li a：悬停：之后{ 宽度：100%； }

---

您在向右悬停时显示下划线？您在向右悬停时显示下划线？效果很好！工作起来很有魅力！