伪元素悬停和文本装饰

Question

给出以下html代码：

<a href="#"><span data-icon="✪"></span>A Link</a>

在悬停时改变text-decoration（为none）是否可能？color会改变，text-decoration不会。

CSS：

a { text-decoration: none; }
a:hover{ text-decoration: underline; }
a:hover [data-icon]:before{
  /*Doesn't work*/
  text-decoration: none;

  /*Works*/
  color: red;
}

jsfiddle

- Mike Henderson

---

我在锚点上看不到红色工作，它在span上工作，文本装饰来自锚点而不是span。您要寻找的最终结果是什么？文本下划线而不是图标吗？还是其他？ - Huangism

@Huangism，我希望图标上没有下划线。 - Mike Henderson

您想要在A链接文本下面加下划线吗？ - Huangism

@Huangism 是的，在链接文本上加下划线。 - Mike Henderson

Answer 1

如我在另一个回答中所解释的那样，您可以使用display: inline-block来防止祖先元素设置的text-decoration传播到您的元素:

a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
a > [data-icon]:before {
  display: inline-block; /* Avoid text-decoration propagation from `a` */
  content: attr(data-icon);
}
a:hover > [data-icon]:before {
  color: red;
}

<a href="#"><span data-icon="✪"></span>A Link</a>

- Oriol

---

行为与 OP 的 fiddle 完全不同。 - Huangism

当你悬停时，整个锚点会移动。 - Huangism

@Huangism 我不确定提问者想要什么，我已经更新了回答。但是我的主要回答部分是，没有必要像你所做的那样更改标记，因为可以使用 display:inline-block 来修复它。 - Oriol

使用 inline-block 时，前导或尾随空格会被修剪，因此您需要额外的侧向填充来进行补偿。还有其他想法吗？ - Davi Lima

@DaviLima 你是指伪元素中的空格吗？使用 white-space: pre 或 pre-wrap 可以保留空格和制表符。 - Oriol

@Oriol：太棒了，非常感谢。比使用填充要更优雅;)只是为了澄清一下，pre-wrap无法正常工作，因为它在我的“-”伪元素（它是横向项分隔符）之前生成了重复的空格，并且在之后没有生成任何内容。pre解决了这个问题。 - Davi Lima

Answer 2

让事情变得更容易，将其分离出来

http://jsfiddle.net/nyFxn/2/

<a href="#"><span data-icon="✪"></span><span class="text">A Link</span></a>

CSS

a:hover{  text-decoration: none; }
a:hover [data-icon] {

  /*Works*/
  color: red;
}
a:hover .text {
    text-decoration: underline;
}

- Huangism

Answer 3

使用display: inline-block在所有浏览器中都可以工作，但不适用于IE。为了让它在IE8+中工作，请在包含图标的伪元素上添加overflow:hidden。

如果在IE中仍然存在下划线，请在伪元素上设置line-height: 1，这样总共就是：

a [data-icon]:before {
    display: inline-block;
    overflow: hidden;
    line-height: 1;
}

- herrschuessler