从 CSS 中的链接中删除蓝色下划线

Sushant Poudel 2023年1月30日 2021年10月2日
  1. text-decoration 属性设置为 none 以从 CSS 中的链接中删除蓝色下划线
  2. 使用伪类进行选择以从 CSS 中的链接中删除蓝色下划线
  3. 删除 box-shadow 属性以从 CSS 中的链接中删除下划线和颜色
从 CSS 中的链接中删除蓝色下划线

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

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

我们可以使用 CSS 中的 text-decoration 属性来指定文本的装饰。该属性是其他三个属性的简写。这些属性是 text-decoration-linetext-decoration-colortext-decoration-styletext-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;
}
Sushant Poudel avatar Sushant Poudel avatar

Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.

LinkedIn