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

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

像任何其他元素一样，链接可以使用CSS属性进行样式化。使用CSS，你可以改变它们的颜色，背景,字体大小。您甚至可以删除出现在链接下面的下划线。

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

答:链接-当用户没有访问，悬停，或点击一个链接

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

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

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

默认情况下，下划线会出现在每一个伪状态下的链接下面:当鼠标悬停，点击，访问，或没有上述。如下图所示:

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

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

CSS:

A:link {text-decoration: none;}
A:访问{text-decoration: none;}
A:hover {text-decoration: none;}
A:主动{文本装饰:无;}

秩序在这里很重要答:链接和答:访问那么，一定要放在第一位吗答:徘徊,然后答:活跃。

HTML:

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

结果:

看到这支笔使用CSS删除链接中的下划线杰米(@websitejamie)CodePen。

还可以将下划线切换为仅在链接悬停并单击时显示。有规则吗文字修饰:下划线;像这样:

看到这支笔从CSS链接中删除下划线2杰米(@websitejamie)CodePen。

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

从链接中删除下划线的过程稍有不同引导CSS在您的项目。让我们简要地讨论一下Bootstrap站点的过程。

默认情况下，在Bootstrap中，链接只在它们在的时候显示下划线徘徊或活跃的状态。这意味着，当访问者将鼠标悬停在某个链接上或单击该链接时，它将显示下划线。否则，即使链接被访问过，下划线也不会显示在链接中。控件定义的链接引导按钮类永远不要显示下划线。

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

CSS:

A:hover {text-decoration: none;}
A:主动{文本装饰:无;}

HTML:

这是一个链接出现在一个段落。下面是Bootstrap的button类定义的链接
链接 . info" rel="noopener" target="_blank" href="#" role="button

结果:

看到这支笔从CSS -引导链接中删除下划线杰米(@websitejamie)CodePen。

用CSS样式化链接

删除链接中的下划线是初学者最常见的问题之一。好消息是这个过程很raybetapp简单text-decoration财产。您只需要一点点HTML和CSS知识就可以实现它。

编者按:本文最初发表于2020年7月，现已全面更新。