作为标题，我使用.icon- *添加图标。在超链接中添加图标时：
<a href="#" class="icon-email icon-large">Email me!</a>
由content属性插入的内容显示悬停时的下划线文本装饰。我想禁用文本装饰只为内容之前：
[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;
}
解决方法
作为其生成元素的
the
:before pseudo-element is rendered as a descendant box(更具体地，就在第一子内容框之前)，它遵守
the same rules its normal descendant boxes do with respect to text-decoration：
The ‘text-decoration’ property on descendant elements cannot have any effect on the decoration of the ancestor.
有关详细信息，请参阅以下答案：
> CSS text-decoration property cannot be overridden by child element
> How do I get this CSS text-decoration override to work?
没有任何好的方法围绕这…唯一的替代品，立即想到的是：
>将文本包裹在其自己的span元素中，然后将text-decoration应用于该span，as shown by skip405.缺点是，当然是额外的标记。
>使用inline块背景图像而不是图标字体中的内联文本与您的：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);
}
