从链接中删除蓝色下划线

Posted 2023-02-22

技术标签:

【中文标题】从链接中删除蓝色下划线【英文标题】：Remove blue underline from link 【发布时间】：2011-02-16 21:31:33 【问题描述】：

我试图让链接显示为白色，不带下划线。文本颜色正确显示为白色，但蓝色下划线顽固地持续存在。我在 CSS 中尝试了 text-decoration: none; 和 text-decoration: none !important; 来删除链接下划线。都没有奏效。

.boxhead .otherPage 
  color: #FFFFFF;
  text-decoration: none;

<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

如何去除链接中的蓝色下划线？

【问题讨论】：

好吧，当你做 text-decoration:none 时它应该会消失。您确定将其应用于正确的元素吗？能否提供示例代码？ text-decoration: none 在哪里使用？ 【参考方案1】：

您没有将text-decoration: none; 应用于锚点 (.boxhead a)，而是应用于 span 元素 (.boxhead)。

试试这个：

.boxhead a 
    color: #FFFFFF;
    text-decoration: none;

【讨论】：

但是，如果您也有文本环绕跨度，并且您希望周围的文本有链接下划线，但跨度内的文本没有？ @rebus，你不能？为什么不？至少在 IE7+ 和 FireFox 4+ 中可以，但由于某种原因不能在 Chrome 中。这是我在我测试的非 Chrome 浏览器中工作的代码：.toc-list a > spantext-decoration:none !important; 我认为@JMTyler 的问题是合法的；我正在寻找相同的解决方案。看起来text-decoration 不支持覆盖嵌套标签，如上所示。一旦应用了a text-decoration: underline; 规则，您不能取消应用它，例如使用a .wish_this_were_not_underlined text-decoration: none; 。我找不到这方面的参考资料，但这是我的经验（在 Chrome 中）。和上面的其他人一样，我无法通过应用text-decoration: none; 来取消文本下划线，因此我们选择使用text-decoration: underline; text-decoration-color: white; 隐藏该行。 /黑客如果您只是想从锚点内的元素中删除下划线，而不是整个锚点。你需要像这样使内部元素成为内联块：.boxhead .otherPage display: inline-block; color: #FFFFFF; text-decoration: none; 【参考方案2】：

锚标签（链接）也有visited、hover、link、active等伪类。确保您的样式适用于相关州，并且没有其他样式有冲突。

例如：

a:hover, a:visited, a:link, a:active

    text-decoration: none;

有关用户操作伪类：hover、:active 和 :focus 的更多信息，请参阅W3.org。

【讨论】：

当你说a:click时，我想你的意思是a:link 这应该是实际接受的答案，因为我在单击按钮链接后遇到了同样的问题。当我回到页面时，访问的属性仍然变为紫色。【参考方案3】：

text-decoration: none !important 应该删除它.. 你确定没有border-bottom: 1px solid 潜伏吗？（在 IE 中跟踪 Firebug/F12 中的计算样式）

【讨论】：

设置 border-bottom-style: none; 为我修复了它。【参考方案4】：

只需将此属性添加到您的锚标记

style="text-decoration:none;"

例子：

<a href="page.html"  style="text-decoration:none;"></a>

或者使用 CSS 方式。

.classname a 
    color: #FFFFFF;
    text-decoration: none;

【讨论】：

【参考方案5】：

有时您看到的是框阴影，而不是文本下划线。

试试这个（使用任何适合你的 CSS 选择器）：

a:hover, a:visited, a:link, a:active 

    text-decoration: none!important;

    -webkit-box-shadow: none!important;
    box-shadow: none!important;

【讨论】：

这个应该是答案。有时，框阴影会产生下划线效果。这是一个答案，但不是最好的。这些范围是全球性的，而不是特定的。像这样的东西应该可以解决问题：.otherPage a:link text-decoration:none;;如果需要，对已访问、活动和悬停重复此操作。【参考方案6】：

您错过了 锚标记的text-decoration:none。所以代码应该如下。

.boxhead a 
    text-decoration: none;

<div class="boxhead">
    <h2>
        <span class="thisPage">Current Page</span>
        <a href="myLink"><span class="otherPage">Different Page</span></a>
    </h2>
</div>

文本装饰的更多标准属性

【讨论】：

【参考方案7】：

通常，如果您的“下划线”与您的文本颜色不同[并且“颜色：”未被内联覆盖]，则它不是来自“文本装饰：”它必须是“边框-底部：“

别忘了去掉你的伪类的边框！

a, a:link, a:visited, a:active, a:hover border:0!important;

这个 sn-p 假定它在一个锚点上，相应地更改为它的包装器......并在找到根本原因后使用特异性而不是“！important”。

【讨论】：

developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color【参考方案8】：

没有看到页面，很难推测。

但在我看来，您可能已经申请了border-bottom: 1px solid blue;。也许添加border: none;。 text-decoration: none !important 是对的，您可能有另一种样式仍在覆盖该 CSS。

这就是使用Firefox Web Developer Toolbar 很棒的地方，您可以在此处编辑 CSS 并查看是否可以正常工作，至少对于 Firefox 来说是这样。它在CSS > Edit CSS 下。

【讨论】：

【参考方案9】：

虽然其他答案都是正确的，但有一种简单的方法可以消除所有这些讨厌的链接上的下划线：

a 
   text-decoration:none;

这将删除页面上每个链接的下划线！

【讨论】：

确保它在锚标记和内联可能会更好，因为您可能希望在其他链接上加下划线。【参考方案10】：

  a 
    color: unset;
    text-decoration: unset;

【讨论】：

【参考方案11】：

如果text-decoration: none 或border: 0 不起作用，请尝试在您的html 中应用内联样式。

【讨论】：

【参考方案12】：

正如其他人指出的那样，您似乎无法覆盖嵌套的文本装饰样式...但您可以更改文本装饰颜色。

作为一个 hack，我将颜色更改为透明：

文字装饰颜色：透明；

【讨论】：

【参考方案13】：

只使用属性

border:0;

你被覆盖了。当 text-decoration 属性 dint 完全起作用时，对我来说非常有用。

【讨论】：

【参考方案14】：

您在错误的选择器中使用了无文本装饰。你需要检查你需要哪个标签来装饰没有。

您可以使用此代码

.boxhead h2 atext-decoration: none;

或

.boxhead atext-decoration: none !important;

或

atext-decoration: none !important;

【讨论】：

【参考方案15】：

没有一个答案对我有用。就我而言，有一个标准

a:-webkit-any-link 
text-decoration: underline;

在我的代码中。基本上无论链接是什么，文本颜色都会变为蓝色，并且链接保持不变。

所以我在标题的末尾添加了这样的代码：

<head>
  </style>
    a:-webkit-any-link 
      text-decoration: none;
    
  </style>
</head>

问题不复存在了。

【讨论】：

【参考方案16】：

以下是 asp.net webforms LinkButton 控件的示例：

 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />

后面的代码：

 lbmmr1.Attributes.Add("style", "text-decoration: none;")

【讨论】：

【参考方案17】：

将以下 HTML 代码放在前面 <BODY>标签：

<STYLE>A text-decoration: none; </STYLE>

【讨论】：

【参考方案18】：

就我而言，我的 HTML 格式不正确。该链接位于<u> 标记内，而不是<ul> 标记内。

【讨论】：

【参考方案19】：

设置文本装饰：无；用于锚标记。

示例 html。

<body>
    <ul class="nav-tabs">
        <li><a href="#"><i class="fas fa-th"></i>Business</a></li>
        <li><a href="#"><i class="fas fa-th"></i>Expertise</a></li>
        <li><a href="#"><i class="fas fa-th"></i>Quality</a></li>
    </ul>
</body>

示例 CSS：

.nav-tabs li a
  text-decoration: none;

【讨论】：

【参考方案20】：

覆盖嵌套的文本装饰样式。查找任何 ::before 或 ::after 选择器，并对任何文本装饰、边框底部等不显示任何内容，或将属性（未设置）重置为任何文本颜色属性，例如：文本装饰-颜色、背景颜色等。

.boxhead .otherPage 
color: #FFFFFF;

a.boxhead .otherPage:before 
background-color: unset;

或

a.boxhead .otherPage:before 
background-color: unset !important;

【讨论】：

以上是关于从链接中删除蓝色下划线的主要内容，如果未能解决你的问题，请参考以下文章

如何从 Apple 键盘听写中删除 TextView 中的蓝色虚线建议下划线？

怎么删除下划线

Outlook 2007 将 HTML 电子邮件中的链接样式更改为在发送到 Hotmail、Gmail 等时具有蓝色下划线。任何修复？

word中文字下划线有哪几种？各有啥意义？

如何从活动导航链接中删除悬停时不必要的附加下划线？

仅当锚标记包含 img 时才从图像中删除链接下划线