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

时的页面

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

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

Answer 4

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

在项目中添加样式表

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

4 个答案: