我有一个.nav-link
当 .active
添加到它时,它会得到 text-decoration: underline
。如何通过从左侧滑入来使此文本装饰动画?
最佳答案
您可以像这样创建和动画自定义下划线。由于您无法为文本装饰设置动画:下划线;
.nav-link:after{
content: '';
position: absolute;
width: 0; height: 3px;
display: block;
margin-top: 5px;
right: 0;
background: #fff;
transition: width .2s ease; // this will add animation from left to right.
-webkit-transition: width .2s ease;
}
.nav-link:active:after{
width: 100%;
left: 0;
background: #fff;
}
关于html - 根据类使导航下划线动画化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56382911/