css – ：hover：before text-decoration没有没有效果？

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

原文地址：https://www.jb51.cc/css/220297.html