scss 悬停效果看神

Posted 2021-05-18

a{
      color:$secondary-color;
      font-size: 1.5rem;
      margin-top: 13px;
      text-align: right;
      text-transform: uppercase;
      font-family: $arialCondensed;
      display: inline-block;
      float: right;
      width: auto;
      line-height: 2.2rem;
      position: relative;
      @extend .transition-all;

      &:after {
        content: "";
        display: block;
        position: absolute;
        width: 0;
        background: $secondary-color;
        height: .1rem;
        bottom: 0;
        left: 0;
        //background-color: $bg-color-3;
        transition: width $duration-btn $bezier-generic;
      }

      &:hover {
        opacity: 1;
        &:after {
          width: 100%;
        }
      }
    }