如何删除下划线从链接的CSS

在网页设计，每个细节都很重要——包括你的链接。

与其他元素一样，链接也可以使用CSS属性设置样式。通过CSS，你可以改变它们的颜色，背景,字体大小．你甚至可以删除链接下面的下划线。

如何编写CSS取决于链接所处的状态。这些状态也被称为伪类CSS类基于用户活动。下面定义了四个伪类。

答:链接-当用户尚未访问、悬停或单击链接时

答:访问-用户访问该链接后

答:徘徊-当用户将鼠标悬停在链接上时

答:活跃-当用户点击链接时

默认情况下，下划线将出现在链接下方的每一个伪状态:悬停，点击，访问，或以上都没有。这如下面的演示所示:

要从链接中删除下划线，可以使用CSS文字修饰财产。下面我们将介绍如何定义这个属性来完全删除HTML站点或Bootstrap站点上的链接中的下划线。

删除下划线的过程就这么简单。让我们一起来看看代码，然后看看它在前端是什么样子的。

CSS:

A:链接{文字装饰:无;｝
答:访问{文字装饰:无;｝
A:悬停{文字装饰:无;｝
A:主动{文饰:无;｝

秩序在这里很重要答:链接和答:访问一定要先来吗答:徘徊,然后答:活跃．

HTML:

这是一个链接出现在一个段落中

结果:

看到这支笔用CSS 1删除链接下划线作者:Christina Perricone (@hubspot)CodePen．

也可以切换下划线，只在链接被悬停并单击时显示。按照规定做吗文字修饰:下划线;像这样:

看到这支笔用CSS 2删除链接下划线作者:Christina Perricone (@hubspot)CodePen．

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

如果您正在使用，从链接中删除下划线的过程略有不同引导CSS在您的项目。让我们简单讨论一下Bootstrap站点的过程。

默认情况下，在Bootstrap中，链接只显示下划线徘徊或活跃的状态。也就是说，当访问者悬停或点击链接时，它会显示下划线。否则，链接中不会显示下划线，即使它们已经被访问过。的定义的链接引导按钮类不要显示下划线。

要删除链接中的下划线，无论它们的状态如何，都需要添加一些CSS。

CSS:

A:悬停{文字装饰:无;｝
A:主动{文饰:无;｝

HTML:

这是一个链接出现在一个段落中。下面是Bootstrap的按钮类定义的链接
Link

结果:

看到这支笔用CSS从链接中删除下划线-引导作者:Christina Perricone (@hubspot)CodePen．

使用CSS样式化链接

移除链接中的下划线是新手前端程序员最常见的问题之一。好消息是这个过程很bob官网官方网站简单text-decoration财产。你只需要一点HTML和CSS的知识就可以完成它。

编者按:本文最初发表于2020年7月，为全面起见已进行更新。