Как я могу изменить направление моего подчеркивания 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);
        }
    }
}

я пытался изменить &: после от 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

Вы должны плавать: right .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/