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，并删除了无用的特定于供应商的属性

Answer 2

您必须浮动：右导航项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/

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

2 个答案: