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

Question

我有一个样式的锚标签 text-decoration: none.

这已经从我的链接中删除了下划线,这就是我想要的.

但是,在单击链接后,链接下划线下方的空格下会出现少量链接下划线.

我有类似的东西

<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>

(使用字体真棒图标)

下划线正好出现在图标之间的空白处.

有没有什么方法可以摆脱那个链接下划线一次又一次？!

Answer 1

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

• 正常
• 徘徊
• 活动(鼠标点击)
• 访问
• (焦点)

在CSS中,您可以为每个声明样式.如果您希望链接不显示以下状态的文本修饰:

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

回答你的评论

是的,您可以使用类名替换a.例如,您有一个类"myLink"的链接.

你可以制作CSS:

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

Answer 2

正确的方法,你应该通过在样式表定义中添加以下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;
}

这将确保所有链接状态中没有下划线,绝对确保页面上的任何链接都不会加下划线.您也可以凝聚的样式定义你的CSS这样的代码不长,它更有效地控制样式的所有链接的行为,因为它适用于所有当你定义页面上的链接的一个

如果您想为特定链接设置样式,请执行以下操作:

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>.

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

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; }

Answer 3

你使用的是错误的财产...... text-decoration-line不是为了这个.

text-decoration-line属性指定装饰将具有哪种类型的线(如果有)

请text-decoration: none改用