Html 为什么点击链接后会出现链接下划线？

Why is link underline appearing after clicking the link?

提问by Victor Grazi

I have an anchor tag styled with text-decoration: none.

我有一个带有 text-decoration: none.

This has removed the underline from my links, which is what I want.

这已从我的链接中删除了下划线，这正是我想要的。

However after the link is clicked, little bits of the link underline appear under the spaces between the icons in the link.

但是，单击链接后，链接中图标之间的空格下方会出现链接下划线的一小部分。

I have something like this

我有这样的事情

<a ng-click="toggle(this)" style="text-decoration: none">
  <i class="fa fa-caret-down"  ng-if="!collapsed"></i>
  <i class="fa fa-folder-open-o" ng-if="!collapsed"></i>
  <i class="fa fa-caret-right"  ng-if="collapsed"></i>
  <i class="fa fa-folder-o" ng-if="collapsed"></i>
</a>

(Using font awesome icons)

（使用字体真棒图标）

The underline is appearing just under the blank space between the icons.

下划线出现在图标之间的空白区域下方。

Is there any way to get rid of that link underline for once and for always?!

有没有办法一劳永逸地摆脱那个链接下划线？！

回答by Mark

That is because the default CSS values for links are declared by different browsers. A link has 4 official states.

这是因为链接的默认 CSS 值是由不同的浏览器声明的。一个链接有 4 个官方状态。

• Normal
• Hover
• Active (On mouseclick)
• Visited
• (Focus)

• 普通的
• 徘徊
• 活动（鼠标点击时）
• 访问过
• （重点）

In CSS you can declare the style for each of these. If you want the link not to display the text-decoration in these states:

在 CSS 中，您可以为每个样式声明样式。如果您希望链接在这些状态下不显示文本装饰：

a, a:hover, a:active, a:visited, a:focus {
    text-decoration:none;
}

Answer to your comment

回复你的评论

Yes, you can replace the a with a classname. For instance, you have a link with the class 'myLink'.

是的，您可以将 a 替换为类名。例如，您有一个“myLink”类的链接。

You can make the CSS:

您可以制作 CSS：

.myLink, .myLink:hover, .myLink:active, .myLink:visited, .myLink:focus {
    text-decoration:none;
}

回答by unixmiah

The right way and you should cover this by adding the following css in your style sheet definition:

正确的方法，您应该通过在样式表定义中添加以下 css 来解决这个问题：

**Longer CSS Styling definition:** 

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
}

a:active {
    text-decoration: none;
}

**Shorter CSS definition:**

a, a:visited, a:hover, a:active {
    text-decoration:none;
}

this will ensure no underlining in all state of linksto be absolutely sure that there will not be underlining in any of the links on the page. You can also condense the styling definition in your css so the code isn't long and it's more efficient to control style for all link behavioursbecause it applies to all of the links on the page when you're defining a

这将确保在所有链接状态下都没有下划线，以绝对确保页面上的任何链接中都没有下划线。您还可以在 css 中压缩样式定义，这样代码就不会很长，并且可以更有效地控制所有链接行为的样式，因为当您定义一个时，它适用于页面上的所有链接

if you want to style it for specific links you'd do the following:

如果您想为特定链接设置样式，您可以执行以下操作：

a.nav:link    {text-decoration: none; }
a.nav:visited {text-decoration: none; }
a.nav:hover   {text-decoration: none; }
a.nav:active  {text-decoration: none; }

<a href="/" class="nav">styled links</a>.

or something completely different adding in colours, overline, font weight, size which are going to be different in each link state for that specific class.

或者完全不同的东西，添加颜色、上划线、字体粗细、大小，这些在特定类的每个链接状态下都会有所不同。

a.external:link    {color: #0000ff; font-size: 18pt; font-weight: bold; }
a.external:visited {color: #894f7b; font-weight: bold; }
a.external:hover   {text-decoration: overline; background-color: #003399; }
a.external:active  {color: red; }

回答by LcSalazar

You're using the wrong property... text-decoration-lineis not meant for this.

你使用了错误的属性......text-decoration-line不是为了这个。

The text-decoration-line property specifies what type of line, if any, the decoration will have

text-decoration-line 属性指定装饰将具有的线条类型（如果有）

Use text-decoration: noneinstead

使用text-decoration: none替代

回答by Alexis Peters

<style>
   a{text-decoration:none}
   a:visited{text-decoration:none}
</style>

Add a stylesheet to your project

将样式表添加到您的项目