DEV Community

loading...

link a with line

voskaul profile image voskaul ・1 min read

紀錄

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

Discussion

pic
Editor guide