up
down
Close
架站盒子
Web Development Box
 

CSS 移除連結底線&自訂底線

│ 7152 Views │ CSS
CSS 移除連結底線&自訂底線
CSS 移除連結底線&自訂底線
  1. 移除連結底線
  2. 移除滑鼠經過的底線
  3. 自訂連結樣式
  4. 實際操作

你能相信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.

延伸閱讀

本文是否對您有幫助?