：hover：before text-decoration没有没有效果？ [英] :hover:before text-decoration none has no effects?

问题描述

作为标题，我使用 .icon - * 添加图标。在超链接中添加图标时：

As title, I'm adding icons using .icon-*. When adding an icon to an hyperlink:

<a href="#" class="icon-email icon-large">Email me!</a>

content 属性插入的内容显示在悬停下划线文本装饰。我想禁用 text-decoration 仅适用于之前的内容：

The content inserted by content property shows the underline text-decoration on hover. I'd like to disable the text-decoration only for the content before:

[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 伪 - 元素呈现为其生成元素的后代框（更具体地，就在第一个子内容框之前），它遵守 c>

As the :before pseudo-element is rendered as a descendant box (more specifically, just before the first child content box) of its generating element, it obeys the same rules its normal descendant boxes do with respect to text-decoration:

后代元素的'text-decoration'属性不能对祖先的装饰产生任何影响。

The 'text-decoration' property on descendant elements cannot have any effect on the decoration of the ancestor.

有关详情，请参阅以下答案：

See these answers for more details:

• CSS text-decoration属性不能被子元素覆盖


• 如何获取此CSS文本装饰覆盖来工作？

• CSS text-decoration property cannot be overridden by child element
• How do I get this CSS text-decoration override to work?

没有任何好的方法。立即想到的唯一替代方法是：

There isn't any good way around this... the only alternatives that come immediately to mind are:

• 将文本包含在自己的 span 元素，然后将 text-decoration 应用于 span ，，如skip405 所示。

• Wrap the text in its own span element, then apply text-decoration to that span, as shown by skip405. The disadvantage is, of course, extra markup.

使用图标字体中的内联块背景图片而不是内联文本， ：before 伪元素（我也已经更正了你的类选择器的不一致）：

Use an inline block background image instead of inline text in an icon font with your :before pseudo-element (I've also corrected the inconsistencies with your class selectors):

[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中使用。

The advantage this has over skip405's solution is that you don't have to modify the HTML, but given that it uses SVG vector background images and background-size, it won't work in IE8.

你需要IE8支持，那么你必须回到位图图像：

If you do need IE8 support, then you have to fall back to bitmap images:

.icon-email:before {
    background-image: url(icon-mail.png);
}
.icon-email.icon-large:before {
    background-image: url(icon-mail-large.png);
}

这篇关于：hover：before text-decoration没有没有效果？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！