link a with line

紀錄

html elm
a.linkline span

需要這效果的className
命名為linkline
a tag包一層span這樣就可以很彈性不用管字數多少
span記得要下相對位置 position: relative;

利用偽元數after來建立這個

1.先設定他的原始位置在右邊寬度0;（呈現的樣貌=最後的結果）
2.滑鼠移過去時線條需要動態
接者在a:hover span:after 設定
寬度width:100% ; 從左邊跑出來 left:0
3.加上動態transition
線條就會從0跑到寬度100%

完成~~

scss

.linkline{
  text-decoration: none;
    span{position: relative;color: #333;
      &:after{display: block; content: '';height: 1px ; background: navy; width:0;
        -webkit-transition: all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
                transition: all .4s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0s;
        position: absolute; bottom:0;
        right:0;
      }
    }
    &:hover{
      span{color: red;
        &:after{
          width:100%;
          left:0;right:auto;
        }
      }
    }
}