仅从锚点元素的子元素中移除下划线

Question

当一个标签包含子元素，例如标签时，在悬停时仍会将下划线应用于它，我想知道如何仅在某人悬停在标签上时取消对标签的下划线。

我正在使用的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元素上。

- Control Freak

---

可能是重复的问题：如何使CSS文本修饰覆盖生效？ 还有这个问题：https://dev59.com/9VDTa4cB1Zd3GeqPNfKP - web-tiki

@Web-tiki，你的示例展示了一个嵌套组，而我的示例展示了一个悬停对象。请解释一下它们之间的相似之处。谢谢。 - Control Freak

<i>标签嵌套在<a>元素中，因此与我提供的两个链接中的问题相同。下划线设置为over并不改变这个问题。答案中提供的解决方案已经在第一个链接中提供了。 - web-tiki

@web-tiki请解释一下那个问题的答案与这个问题所给出的答案相同的原因。 - Control Freak

“你可以使用 display:inline-block 属性来覆盖应用在父元素上的 text-decoration 样式。” - web-tiki

这个回答解决了你的问题吗？无法取消子元素的文本装饰 - Jason C

Answer 1

尝试以下CSS：

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

演示

- Chamika Sandamal

---

我也很好奇为什么这个能够运行。有人能解释一下吗？ - michaellee

通常这意味着你只能将text-decoration应用于块级元素，但事实并非如此...所以这没有太多意义。 - doublejosh

这是 CSS 规范中的一部分，解释了在链接内部的内联块不会被下划线所覆盖。实际上不需要使用 text-decoration:none !important; 这句话。 - stealthwang

@Chamika：我在一些HTML通讯邮件中尝试了一下，但在一些Outlook客户端（例如Outlook 2013、2010）上无法正常工作。你有什么想法吗？ - Ron16

如果子元素需要成为块级元素怎么办？ - Jason C

Answer 2

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

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

JSFiddle

- Karlen Kishmiryan

Answer 3

我曾经遇到同样的问题，通过以下css规则解决：

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

希望它有所帮助！

- Lorenzo Meriggi

Answer 4

我有两件事要补充...

有时将代码作为（常规内联）锚点的子元素，有时则不是：

  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

1. 你应该添加 line-height: normal 来弥补 inline-block 的影响，否则链接元素的填充将与其他元素不同。（即你的行高很容易开始看起来不一致）

2. 可选：如果你只是因为下划线有一个不同的颜色而感到烦恼（即 外部链接颜色 而不是 code 的绿色），在内部元素上再次设置 text-decoration 可以解决这个问题。

- Frank N

Answer 5

只需添加 display:inline-block;

FIDDLE DEMO

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

- Richa

Answer 6

你也可以这样编写 HTML

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

以及类似CSS的内容

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

- Bir

Answer 7

我遇到了同样的问题。

但是我想让内部元素在右侧，所以只设置 float: right 就可以了。

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

供参考。

- KABA