:悬停:在text-decoration之前没有效果？

Question

作为标题,我正在使用添加图标.icon-*.向超链接添加图标时:

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

按content属性插入的内容在悬停时显示下划线文本修饰.我想禁用text-decoration之前的内容:

[class^="icon-"]:before, [class*=" icon-"]:before {
    font-family: 'IcoMoon';
    font-style: normal;
    speak: none;
}
.icon-mail:before {
    content: "\37";
}
[class^="icon-large-"]:before, [class*=" icon-large"]:before {
    font-size: 48px;
    line-height: 48px;
}
a[class^="icon-"]:before, a[class*=" icon-"]:before {
    margin-right: 5px;
    vertical-align: middle;
}

我试过这个,但它不起作用(装饰仍然可见):

a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before {
    text-decoration: none;
    color: white;
}

Answer 1

插入显示:内联块; 在你的CSS.像下面这样的东西:

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

这是JS FIDDLE:

http://jsfiddle.net/73p2k/18/

Answer 2

作为该:before伪元素呈现为后代盒(更具体地说,仅仅是第一子内容禁区前)的发电元件的,它遵循相同的规则其正常的后代盒做关于text-decoration:

后代元素的'text-decoration'属性不会对祖先的装饰产生任何影响.

有关详细信息,请参阅以下答案

• 子元素不能覆盖CSS text-decoration属性
• 如何使CSS文本修饰覆盖工作？

没有任何好办法...立即想到的唯一选择是:

• 自动换行以自己的span元素,然后应用text-decoration到span,如图skip405.当然,缺点是额外的标记.

• 使用内嵌块背景图像而不是带有:before伪元素的图标字体中的内嵌文本(我还更正了与类选择器的不一致):

  [class^="icon-"]:before, [class*=" icon-"]:before {
      display: inline-block;
      width: 1em;
      height: 1em;
      background-size: contain;
      content: "";
  }
  .icon-email:before {
      background-image: url(icon-mail.svg);
      background-repeat: no-repeat;
  }
  .icon-large:before {
      width: 48px;
      height: 48px;
  }
  a[class^="icon-"]:before, a[class*=" icon-"]:before {
      margin-right: 5px;
      vertical-align: middle;
  }
  

  这个拥有超过skip405的解决方案的好处是,你不必修改HTML,但考虑到它使用SVG矢量背景图像和background-size,它不会在IE8工作.

  如果您确实需要IE8支持,那么您必须回退到位图图像:

  .icon-email:before {
      background-image: url(icon-mail.png);
  }
  .icon-email.icon-large:before {
      background-image: url(icon-mail-large.png);
  }