CSS去除下划线 - CSS

当链接被点击时，浏览器默认会给它加上下划线。但有时我们可能想要去除这个下划线，这篇文章将介绍如何用CSS实现这一功能。

使用text-decoration属性

最简单的方法是使用CSS的 text-decoration 属性并将它设置为 none。下面的代码片段演示了如何使用它：

a {
  text-decoration: none;
}

这个代码块会选择所有链接元素 a 并将它们的下划线去掉。

使用border-bottom属性

另一个方法是在链接上添加一个底部边框，以代替下划线。这可以使用CSS的 border-bottom 属性来完成。下面的代码片段演示了如何使用它：

a {
  border-bottom: none;
}

这样会选择所有链接元素 a 并将它们的底部边框去掉。

优化代码

上述代码可以进一步优化。如果我们只想在链接被悬停时才添加下划线（或底部边框），可以使用CSS的 :hover 伪类来指定悬停时的样式。下面的代码片段演示了如何使用它：

a {
  text-decoration: none;
  border-bottom: none;
}

a:hover {
  text-decoration: underline;
  border-bottom: 1px solid blue;
}

这样会选择所有链接元素 a 并将它们的底部边框和下划线去掉，但当鼠标悬停在链接上时，它们的下划线和底部边框将出现。

总结

以上是去除链接下划线的几种方法。我们可以使用 text-decoration 属性或 border-bottom 属性来完成这个任务。此外，我们还可以优化代码以在链接被悬停时才添加下划线或底部边框。