html中怎么让div向左移动,如何更改CSS下划线过渡的方向,并使其从右向左移动？...

我在互联网上发现了此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);

transition: all .3s cubic-bezier(.19,1);

-webkit-transform: scaleX(0) translate3d(0,0);

-moz-transform: scaleX(0) translate3d(0,0);

transform: scaleX(0) translate3d(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);

opacity: 1;

content: "";

}

&:hover {

&:after {

-webkit-transform: scaleX(1) translate3d(0,0);

-moz-transform: scaleX(1) translate3d(0,0);

transform: scaleX(1) translate3d(0,0);

}

}

}

我试图将&：after从scaleX(1)更改为scaleX(-1),它可以按我的需要工作,但与文本距离较远.