html - 根据类使导航下划线动画化

Question

我有一个.nav-link

当 .active 添加到它时，它会得到 text-decoration: underline。如何通过从左侧滑入来使此文本装饰动画？

Answer 1

您可以像这样创建和动画自定义下划线。由于您无法为文本装饰设置动画:下划线；

.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;
}