导航栏下标线实现动画效果

css样式

    .administration {
      position: relative;
      display: block;
      line-height: 80px;
      text-align: center;
      width: 80px;
      height: 80px;
    }

    a:hover:after {
      width: 100%;
      transition: all 300ms ease;
      -webkit-transition: all 300ms ease;
    }

    a:after {
      content: "";
      width: 0;
      margin: auto;
      display: block;
      height: 3px;
      background-color: #3c9ed1;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      transition: all 3800ms ease;
      -webkit-transition: all 300ms ease;
    }

HTML

  <a href="#" class="administration">管理</a>

效果

鼠标离开

鼠标放上