根据类别使导航下划线动画

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