Css ：悬停：在文本装饰之前没有任何效果？

作为标题，我正在使用

.icon-*

添加图标。将图标添加到超链接时：

<a href="#" class="icon-email icon-large">Email me!</a>

我已经试过了，但不起作用（装饰仍然可见）：

---

伪元素选择器必须是选择链中的最后一项

---

您可以将样式应用于

element:hover:before

，但不能应用于

element:before:hover

尝试了一些仅使用

a

标记作为标记的方法，但遗憾的是。一种可能的解决方法是将链接内包装到另一个元素中，例如

span

。因此，您可以在这个元素上使用下划线（而不是伪元素）——它完全由css控制

这里有一个活生生的例子：

作为它的生成元素（更具体地说，就在第一个子内容框之前），它遵循：

后代元素上的“文本装饰”属性不能对祖先的装饰产生任何影响

有关更多详细信息，请参见以下答案：

没有什么好办法可以解决这个问题。。。立即想到的唯一选择是：

• 将文本包装在其自己的

  span

  元素中，然后对该

  span

  应用

  文本装饰。当然，缺点是额外的标记
  

• 在

  ：before

  伪元素中使用内联块背景图像，而不是图标字体中的内联文本（我还纠正了与类选择器的不一致）：

  [class^=“icon-”]：之前，[class*=“icon-”]：之前{
  显示：内联块；
  宽度：1米；
  高度：1米；
  背景尺寸：包含；
  内容：“；
  }
  .图标电子邮件：之前{
  背景图像：url（icon-mail.svg）；
  背景重复：无重复；
  }
  .图标大：之前{
  宽度：48px；
  高度：48px；
  }
  一个[class^=“icon-”]：在前面，一个[class*=“icon-”]：在前面{
  右边距：5px；
  垂直对齐：中间对齐；
  }
  

  与skip405的解决方案相比，它的优势在于您不必修改HTML，但考虑到它使用和，它在IE8中不起作用
  如果您确实需要IE8支持，则必须回到位图图像：

  。图标电子邮件：之前{
  背景图片：url（icon mail.png）；
  }
  .图标电子邮件.图标大：之前{
  背景图片：url（icon-mail-large.png）；
  }
  

---

您可以设置高度和溢出：隐藏：在元素之前，文本装饰将不可见：）

插入显示：内联块；在你的css中。类似于下面的一个：

.icon-mail:before {
    content: "\37";
    display:inline-block;
    text-decoration:none;
}

以下是JS小提琴：

---

使用伪元素无法做到这一点。你将不得不使用JS。是的，没有JS，你不能像那样将伪元素和伪类加倍。我建议使用javascript处理：before而不是：hover。这是因为：before不是所有浏览器都支持的。但那只是我的2美分。@BumbleB2na至少IE8+、FF10.0.2+、Opera 11.61+、Safari 5.1.2+、Chrome 17@BumbleB2na：你可以-伪元素必须是选择器中的最后一个。我注意到类和属性选择器中有一些输入错误，这些错误与当前的问题无关。值得注意的是，您的

icon-large

属性选择器可以简单地更改为

。icon-large:before

（但我假设您仅将其作为一个独立类，而不是其他类的前缀）。它确实是。。。标题是错的，问题是对的。我会修好的。非常感谢你的时间和解释。我将使用额外的标记解决方案。请参阅下面的最新答案。非常感谢您的这一技巧。从未想过添加它。@acme，请查看最新的jsfiddler以获得IE支持。在IE9中测试，因此对于IE，您必须设置

文本装饰：下划线至
a:之前
和
文本装饰：无到
a：悬停：在
之前。这似乎是一个好消息。Thx Pinoy2015！什么？？这确实奏效了。。。并且仅适用于内联块。。。。你能解释一下为什么会这样吗？你是如何得出这个结论的？在我的例子中，这就是实际的解决方案。
.icon-mail:before {
    content: "\37";
    display:inline-block;
    text-decoration:none;
}