：悬停：文字修饰之前没有任何效果？

作为标题，我使用.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; 
}

来源

2012-07-13 gremo

你不能做到这一点与pseudoelements。你将不得不使用JS。 – Bojangles 2012-07-13 16:47:03

是的，你不能双倍pseusoelements和pseudoclasses那样没有js。我会建议使用JavaScript来处理：之前，而不是处理：悬停。这是因为：之前并不是所有浏览器都支持。但这只是我的2美分.. – BumbleB2na 2012-07-13 16:47:25

@ BumbleB2na至少IE8 +，FF10.0.2 +，Opera 11.61+，Safari 5.1.2+，Chrome 17 http://www.quirksmode.org/css/contents.html – gremo 2012-07-13 16:57:22

随着the :before pseudo-element is rendered as a descendant box（更具体地说，仅仅是第一子内容禁区前）的发电元件的，它服从the same rules its normal descendant boxes do with respect to text-decoration：

的“文本 - 装饰'后裔元素的属性不会对祖先的装饰有任何影响。

见这些问题的答案更多细节：

没有解决这个......立即浮现在脑海中的唯一的选择没有什么好的办法分别是：

自动换行以自己的span元素，然后应用text-decoration到span，as shown by 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 vector background images和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); 
}

来源

2012-07-14 04:41:23 BoltClock

真的非常感谢您的时间和您的解释。我会去寻找额外的标记解决方案。 – gremo 2012-07-14 10:32:46

一个pseudoelement选择必须是选择链中的最后一项。

您可以将样式应用于element:hover:before但不element:before:hover。

来源

2012-07-13 16:49:18

确实......标题是错的，问题是正确的。去解决它。 – gremo 2012-07-13 17:00:58

仅使用a标签作为标记尝试了一些东西，但很可惜。一个可能的解决方法可能是将内部链接包装到另一个元素中，例如span。因此你可以在这个元素上加上下划线（而不是伪元素） - 它完全由css控制。

一个活生生的例子是在这里：http://jsfiddle.net/skip405/fQHUH/

来源

2012-07-13 19:52:14 skip405

您可以设置高度&溢出：隐藏于：元素之前，和文字修饰不会可见：）

来源

2012-11-14 10:08:51 user123321

插入显示：inline-block;在你的CSS。类似下面的一个：

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

这里是JS FIDDLE：

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

来源

2014-05-14 08:02:06 Pinoy2015

不幸的是在IE中无法正常工作。 – acme 2014-06-25 14:39:29

非常感谢你的这一招。永远不会想到添加它。 – 2014-11-19 21:01:36

@acme，请参阅最新的jsfiddler以获得IE支持。在IE9中测试http://jsfiddle.net/73p2k/18/ – Pinoy2015 2014-12-10 10:10:13

：悬停：文字修饰之前没有任何效果？

回答

相关问题