html - 如何在鼠标移出时为右侧的下划线宽度设置动画？

Question

我的菜单上有这段 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;

Answer 1

我制作了这个简单的边框动画，我认为它可以帮助您实现目标。

ul li a {
    display: inline-block;
}

ul li a:after {
    content: '';
    display: block;
    width: 0;
    height: 2px;
    background: #000;
    transition: width .3s;
}

ul li a:hover:after {
    width: 100%;
}

<ul>
    <li><a href="">Test animation</a></li>
    <li><a href="">Test animation</a></li>
    <li><a href="">Test animation</a></li>
    <li><a href="">Test animation</a></li>
</ul>