迹忆客 专注技术分享

本篇文章将介绍去除 HTML 中超链接中形成的蓝色下划线的方法。我们将使用 CSS 来删除这样的下划线。

将 text-decoration 属性设置为 none 以从 CSS 中的链接中删除蓝色下划线

我们可以使用 CSS 中的 text-decoration 属性来指定文本的装饰。该属性是其他三个属性的简写。这些属性是 text-decoration-line、text-decoration-color 和 text-decoration-style。text-decoration-line 属性应用文本装饰，如上划线、下划线和穿线。text-decoration-color 属性负责设置文本装饰的颜色，text-decoration-style 将不同的样式应用到文本装饰中，例如纯色、波浪形、虚线、虚线。当我们使用简写属性 text-decoration 时，我们可以将值指定为 none。因此，我们可以将所有三个属性都设置为 none。因此，它将删除超链接中的下划线并删除蓝色。

例如，创建一个带有 container 类的 div。然后，在 div 中，使用类 thisPage 创建一个 span。接下来，在 span 标签之间，写入文本 Current Page。在下面的行中写一个 anchor 标签。将标签的 href 属性设置为 #。在 anchor 标签内，用 otherPage 类编写另一个 span。在 span 之间写入文本 Next Page。然后在相应的 CSS 文件中，选择位于 container 类中的锚点标记为 .container a。使用十六进制代码 #FF0000 为文本设置红色。然后，将 text-decoration 属性设置为 none。

下面的 CSS 会将文本 Next Page 设置为红色，这是一个超链接。text-decoration 属性设置为 none，将删除 anchor 标签元素的下划线和蓝色。

示例代码：

<div class="container">
    <span class="thisPage">Current Page</span>
    <a href="#"><span class="otherPage">Next Page</span></a>
</div>

.container a {
  color: #FF0000;
  text-decoration: none;
}

使用伪类进行选择以从 CSS 中的链接中删除蓝色下划线

我们将选择伪类并应用与第一种方法相同的 CSS 属性来从链接中删除蓝色下划线。以前，我们只选择了 anchor 标签。在这个方法中，我们将使用伪类来选择锚标签。我们将使用像 :hover、:visited、:link 和 :active 这样的伪类。:hover 类适用于用户使用指针设备（例如鼠标）指向元素但不一定单击元素的情况。:visited 类在链接已被点击时适用。同样，:link 类选择所有未访问的链接。并且，:active 类选择活动链接。在此方法中，我们将使用相同的 HTML 文档进行演示。

例如。使用伪类 :link、:visited、:hover 和 :active 选择 anchor 标签。用逗号分隔每个伪类。将 text-decoration 属性设置为 none，并将 color 属性设置为 #000000。

应用的 CSS 属性将对以下示例中的所有伪类生效。a:link 选择器将在未访问链接时将超链接颜色更改为黑色并删除下划线。它覆盖了所有其他选择器中的 color 属性。a:visited 选择器将在链接被访问后从链接中删除下划线。当我们将鼠标悬停在链接上和单击链接时，CSS 效果也会发生。通过这种方式，我们可以使用 CSS 伪类从链接中删除下划线和蓝色。

示例代码：

<span class="thisPage">Current Page</span>
<a href="#"><span class="otherPage">Next Page</span></a>

a:link, a:visited,  a:hover, a:active
{
    color: #000000;
    text-decoration: none;
}

删除 box-shadow 属性以从 CSS 中的链接中删除下划线和颜色

有时，可以使用 box-shadow 属性设置下划线的样式。我们可以使用该属性为任何文本提供下划线效果。以下 CSS 代码片段创建了一个下划线。

box-shadow: inset 0 -3px 0 0 #bdb;

在这种情况下，如果我们想删除下划线，我们可以删除 box-shadow 属性，或者我们可以将该属性的值设置为 none。

在下面的示例中，span 类的样式为绿色，而 box-shadow 属性用于创建红色下划线。然后，该属性的值设置为 none，这会从文本中删除下划线效果。

示例代码：

<span class="thisPage">Current Page</span>

.thisPage {
  color: green;
  box-shadow: inset 0 -3px 0 0 red;
  box-shadow: none;
}