你能相信2022年了，預設的連結底線竟然還是長這樣，所有架站的人，從小白到專家，全都要親自動手移除這底線，值到我們看到這樣的連結才能感到滿意。
移除連結底線
預設的底線設定是text-decoration: underline，因此移除預設的底線只要把text-decoration改為 none 即可。
a {
text-decoration: none;
}
效果：我是超連結
移除滑鼠經過的底線
這樣還不夠，因為當滑鼠經過時，他還是會原形畢露，因此還需要設定偽類，包含滑鼠經過、點擊、未造訪連結等，以下列出全部。
a:hover, a:visited, a:link, a:active {
text-decoration: none;
}
效果：我是超連結
說明：
- :hover：滑鼠經過
- :visited：已造訪連結（點擊）
- :link：未訪問連結
- :active：活動連結
自訂底線樣式
以上只是移除預設的連結樣式，如果想要加上自訂的底線，可以用border-bottom來達成。
a {
text-decoration: none;
border-bottom:1px dotted;
}
dotted是虛線，如果要實線則是solid，如果想改變底線顏色，就在border-bottom最後面加上顏色即可。
a {
text-decoration: none;
border-bottom:1px dotted #ff0;
}
實際操作
See the Pen
text-decoration:none CSS by kumo (@kumo-tw)
on CodePen.
本文是否對您有幫助？