原文: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 中删除链接的默认下划线。
如果你觉得这篇文章有帮助,请不要犹豫,与你的朋友和家人分享它。
谢谢你阅读本文。