仅从锚元素子元素中删除下划线答案

【问题标题】：Remove underline only from anchor element child仅从锚元素子元素中删除下划线
【发布时间】：2014-09-10 09:55:42
【问题描述】：

当a 标签包含子元素时，例如i 标签，它仍然在悬停时为其应用下划线，我想知道当有人悬停时如何从i 标签中删除下划线在a 标签上。

我正在使用的 CSS：

a{
    display:block;
    text-decoration:none;
}
a i{
  color:#888;
  margin-left:5px;
}
a:hover{
    text-decoration:underline;
}
a:hover i{
    text-decoration:none !important;
}

这里有一个小提琴来解释： http://jsfiddle.net/kkz66x2q/

我只是希望当您将鼠标悬停在链接上时，下划线仅在 i 元素上消失。

【问题讨论】：

How do I get this CSS text-decoration override to work? 的可能副本还有这个：stackoverflow.com/questions/3869286/…
@web-tiki 您的示例显示了一个嵌套组，我的示例显示了一个悬停对象。请解释它们的相似之处。谢谢。
<i> 标签嵌套在 <a> 元素中，因此它与我提供的两个链接中的问题相同。下划线设置在上面的事实并没有改变问题。 + 以下答案中提供的解决方案已在第一个链接中提供。
@web-tiki 解释该问题的答案与该问题的答案有何相同
引用第一个链接：“您可以使用 display:inline-block 覆盖应用于父元素的文本装饰。”

标签： css

【解决方案1】：

试试下面的css，

a:hover i{
    display: inline-block; <-- this is the trick
    text-decoration:none !important;
}

Demo

【讨论】：

我也很好奇为什么会这样。谁能解释一下？
通常这意味着您只能将text-decoration 应用于块级元素，但这不是正在发生的事情......所以这没有多大意义。
为了解释这一点，这是 CSS 规范的一部分，链接中的内联块没有下划线。你实际上甚至不需要text-decoration:none !important; 行
@Chamika ：我在一些 html 时事通讯中尝试过，但它不适用于某些 Outlook 客户端（例如 Outlook 2013、2010）。有什么想法吗？

【解决方案2】：

将i的display属性设置为inline-block：

a i {
    ...
    display: inline-block;
}

JSFiddle

【讨论】：

【解决方案3】：

我遇到了同样的问题，并使用以下 css 规则解决了这个问题：

a:-webkit-any-link {text-decoration:none}

希望对你有帮助！

【讨论】：

【解决方案4】：

只需添加display:inline-block;

FIDDLE DEMO

a:hover i {
    display:inline-block;
    text-decoration:none !important;
}

【讨论】：

【解决方案5】：

你也可以像 HTML 一样编写 HTML

    <a href="#">Link</a><i>(2)</i>

和 CSS 类似

  a{
    display:inline-block;
    text-decoration:none;
  }

【讨论】：

【解决方案6】：

我有两件事要补充……

有时将代码用作（常规内联）锚的子项，有时则不：

  code
    font-family: Courier New, Courier, monospace
    color: green
    background: rgba( white, .2 )
    padding: 2px 4px
    text-decoration: none

  a code
    display: inline-block
    line-height: normal
    text-decoration: underline

您应该添加line-height: normal 以补偿内联块，否则您将在链接元素上使用与其他元素不同的填充。（即你的 line-height 很容易开始看起来不一致）
并且可选：如果您只是生气，下划线有一个不同的颜色（即outer link color，而不是code的绿色）设置文本装饰一次再次在那个内部元素上帮助......

【讨论】：

【解决方案7】：

我遇到了同样的问题。

但我希望内部元素是正确的，所以设置float: right 工作正常。

a {
    display: block;
    overflow: hidden; // Clearfix
    text-decoration: none;
}
a .right-none-underline-element { float: right }

供您参考。

【讨论】：