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

【问题标题】：How can I change the direction of my CSS underline transition and make it move from right to left?如何更改 CSS 下划线过渡的方向并使其从右向左移动？
【发布时间】：2019-07-29 16:18:02
【问题描述】：

我在互联网上找到了这个 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)，它可以按我的需要工作，但与文本相差甚远。

【问题讨论】：

标签： css twitter-bootstrap animation

【解决方案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，并删除了无用的供应商特定属性

【讨论】：

【解决方案2】：

你必须浮动：对 .nav-item a::after。它会工作

.nav-item > a {
    display: inline-block;
    border-radius: 10px;
    padding: 10px 20px;
    transition: all 0.3s cubic-bezier(.19,1,.22,1);
    text-decoration: none;
}

.nav-item > a::after {
    content: '';
    display: block;
    height: 4px;
    width: 0%;
    background-color: #6cb2eb;
    float: right;
    transition: all 0.3s cubic-bezier(.19,1,.22,1);
}
.nav-item > a:hover::after {
    width: 100%;
}

检查这个小提琴 - https://jsfiddle.net/jfgq2kva/6/

【讨论】：