[CSS]劃底線

偶爾會被要求要做hover上一個區塊,區塊文字要有劃線的效果,該如何完成呢？

試著用偽元素來寫寫看

看起來效果不錯,但這個做法會遇到一些問題

如果文字長到會換行呢？

線只畫在底部

好吧,這做法看起來不是很適合,那該怎麼做呢？

答案是:利用背景

在改寫之前,先要來了解需要用背景完成兩件事:

1. 將背景上下分段上色
2. 調整背景寬度以達到劃線效果

這裡需要用到background-image搭配linear-gradient來上下著色

background-image

linear-gradient()

以及background-size來調整背景寬度

background-size

讓我們改寫一下剛剛的範例

如此一來就不會遇到換行的問題了

這裡還可以玩點小把戲,把劃線效果變成劃重點

調整一下寬度以及背景顏色的百分比

今天講的是一個簡單的小效果,不過有時比起單純將字體加粗,偶爾利用CSS的動態效果更能吸引人的目光。