css - 如何更改 CSS 下划线过渡的方向并使其从右向左移动？

Question

我在互联网上找到了这个 css 代码，它创建了下划线动画效果，我需要将它反转为从右到左而不是从左到右。

.nav-item a {
    display: inline-block !important;
    &:after {
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        border-radius: 10px;
        -webkit-transition: all .3s cubic-bezier(.19,1,.22,1);
        -moz-transition: all .3s cubic-bezier(.19,1,.22,1);
        transition: all .3s cubic-bezier(.19,1,.22,1);
        -webkit-transform: scaleX(0) translate3d(0,0,0);
        -moz-transform: scaleX(0) translate3d(0,0,0);
        transform: scaleX(0) translate3d(0,0,0);
        -webkit-transform-origin: 0 0;
        -moz-transform-origin: 0 0;
        -ms-transform-origin: 0 0;
        -o-transform-origin: 0 0;
        transform-origin: 0 0;
        display: block;
        height: 4px;
        width: 100%;
        background-color: #6cb2eb;
        -o-transition: all .3s cubic-bezier(.19,1,.22,1);
        opacity: 1;
        content: "";
    }
    &:hover {
        &:after {
            -webkit-transform: scaleX(1) translate3d(0,0,0);
            -moz-transform: scaleX(1) translate3d(0,0,0);
            transform: scaleX(1) translate3d(0,0,0);
        }
    }
}

我尝试将 &:after 从 scaleX(1) 更改为 scaleX(-1) 它可以按我的需要工作，但与文本相去甚远。

Answer 1

只需将 transform-origin 从 0 0 更改为 100% 100%:

.nav-item a {
  display: inline-block !important;
}
.nav-item a:after {
  border-radius: 10px;
  transition: all 0.3s cubic-bezier(0.19, 1, 0.22, 1);
  transform: scaleX(0) translate3d(0, 0, 0);
  transform-origin: 100% 100%;
  display: block;
  height: 4px;
  width: 100%;
  background-color: #6cb2eb;
  opacity: 1;
  content: "";
}
.nav-item a:hover:after {
  -webkit-transform: scaleX(1) translate3d(0, 0, 0);
  -moz-transform: scaleX(1) translate3d(0, 0, 0);
  transform: scaleX(1) translate3d(0, 0, 0);
}

<div class="nav-item">
  <a>test</a>
</div>

注意:我将 scss 转换为 css，并删除了无用的供应商特定属性