英文 | https://niemvuilaptrinh.medium.com/19-css-text-underline-for-websites-b17a52c8ac6f
今天的文章，我們将一起來學習如何将網站中的預設下劃線設計成漂亮的下劃線效果，同時，可以提升使用者體驗，也可以幫助網站來吸引使用者的注意力！
現在，我們就開始今天的内容。
01、CSS下劃線效果集合
示範位址：https://codepen.io/TheCSSKing/pen/VwwRzgg
02、時尚的下劃線 CSS
示範位址：https://codepen.io/johndjameson/pen/zKrKQP
03、CSS下劃線框陰影
示範位址：https://codepen.io/johndjameson/pen/NroZqB
04、CSS 下劃線粗細
示範位址：https://codepen.io/pirrera/pen/WNOYov
05、CSS3下劃線漸變動畫
示範位址：https://codepen.io/NickNoordijk/pen/QbEZQG
06、SVG 文本下劃線
示範位址：https://codepen.io/iam_aspencer/pen/qvNPBv
07、CSS 下劃線顔色
示範位址：https://codepen.io/mattgrosswork/pen/rNWvNa
08、CSS懸停下劃線效果
示範位址：https://codepen.io/bonkalol/pen/mdRMOp
09、Javascript 下劃線效果
示範位址：https://codepen.io/chriscoyier/pen/JjGEpXK
10、CSS3下劃線動畫
示範位址：https://codepen.io/jimmyplaysdrums/pen/vOMRQw
11、SVG下劃線效果
示範位址：https://codepen.io/rachsmith/pen/pJbPyN
12、懸停下劃線 HTML5 CSS3
示範位址：https://codepen.io/timaronan/pen/zYWdwr
13、CSS下劃線漸變色
示範位址：https://codepen.io/iLord/pen/MozdKg
14、CSS動畫下劃線多行
示範位址：https://codepen.io/Wking/pen/BdmpVx
15、 CSS懸停下劃線
示範位址：https://codepen.io/tonkec/pen/jWmgqN
16、動畫下劃線懸停
示範位址：https://codepen.io/msco195/pen/KgodYm
17、簡單的 CSS 滑動下劃線菜單
示範位址：https://codepen.io/rm/pen/AXpmja
18、下劃線動畫
示範位址：https://codepen.io/aaroniker/pen/pojaBvb
19、多行動畫下劃線效果
示範位址：https://codepen.io/cecilehabran/pen/EvRamr
20、多行跨越動畫下劃線效果
示範位址：https://codepen.io/cassie-codes/pen/rNNGdmw
21、文字裝飾下劃線動畫
示範位址：https://codepen.io/Kseso/pen/ApYVoW
22、下劃線動畫波浪
示範位址：https://codepen.io/daviddarnes/pen/OgaRYw
23、文字下劃線懸停效果
示範位址：https://codepen.io/MishaHahaha/pen/rLpoeG
24、多行動畫下劃線文字效果
示範位址：https://codepen.io/melnik909/pen/xNmpZw
25、 CSS懸停時的下劃線效果
示範位址：https://codepen.io/bobbyshowalter/pen/xxwVvX
總結
以上就是，我今天跟大家分享的25個文本下劃線的案例效果，希望對你有所幫助，如果你有任何問題，請在留言區給我留言，我會盡快回複。
感謝你的閱讀，祝你今天過得愉快！