css – :hover:before text-decoration没有没有效果?

前端之家收集整理的这篇文章主要介绍了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 imagesbackground-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.f2er.com/css/220297.html

猜你在找的CSS相关文章