我在互联网上发现了此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),它可以按我的需要工作,但与文本距离较远.
