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