如题，我使用添加图标.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;
}
由于在:before伪元素呈现为后代盒 （更具体地说，仅仅是第一子内容禁区前）的发电元件的，它遵循相同的规则其正常的后代盒相对于做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); }
插入显示：内联块; 在你的CSS。 类似下面的一个：
.icon-mail:before {
content: "\37";
display:inline-block;
text-decoration:none;
}
这里是JS FIDDLE：
http://jsfiddle.net/73p2k/18/
您可以设置高度和溢出：隐藏于：元素之前，和文字修饰将不可见:)
一个pseudoelement选择必须在选择链中的最后一个项目。
您可以将样式element:hover:before而不是element:before:hover 。
只使用尝试了一些东西a标签作为标记，但很可惜。 为你可能的解决方法可能是内包装的另一个元素的链接，一个span ，例如。 因此，你可以有这样的元件（而不是pseudoelement）上下划线 - 这是完全由CSS控制。
一个活生生的例子是在这里： http://jsfiddle.net/skip405/fQHUH/
