如何在 CSS 中删除链接的下划线

原文：How to Remove Underline from a Link in CSS – HTML Style Guide，作者：Kolade Chris

如果你是 Web 开发人员，你可能希望摆脱在向页面添加链接时出现的默认下划线。

幸运的是，就像网页上的其他元素一样，你可以设置负责显示链接的锚标记的样式。

在本文中，我将向你展示如何使用 CSS 从链接中删除下划线。我还将向你展示链接可以处于的四种状态，以及如何删除每个状态的下划线。

如何删除链接的下划线

默认情况下，link  标签在浏览器中的显示方式如下：

首先，重要的是要知道链接标签（锚标签）可以处于 4 种不同的状态，称为伪类：

• a:link：链接不活动、未访问或悬停时的常规状态
• a:visited：当链接被用户点击时，即访问时
• a:hover：当用户悬停在链接上时
• a:active：当用户点击链接时

注意：由于 CSS 的级联性质，状态（伪类）必须按上面列出的顺序出现。

要最终删除链接的默认下划线，你可以定位所有伪类，并为它们分配一个值为 none 的 text-decoration 属性。

<p>This is a <a href="#">link</a></p>

 a:link {
      text-decoration: none;
}

a:visited {
      text-decoration: none;
}

a:hover {
      text-decoration: none;
}

a:active {
      text-decoration: none;
}

你还可以使用锚元素选择器将默认下划线全部删除：

 a {
       text-decoration: none;
}

你可以在 CodePen 中尝试链接标签的 4 个伪类：

小结

我希望这篇文章能帮助你了解如何在 CSS 中删除链接的默认下划线。

如果你觉得这篇文章有帮助，请不要犹豫，与你的朋友和家人分享它。

谢谢你阅读本文。