:hover:before text-decoration none 没有效果?

2022-01-10 00:00:00 css-selectors pseudo-element css

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

我试过了，但它不起作用(装饰仍然可见):

I've tried this but it's not working (decoration is still visible):

a[class^="icon-"]:hover:before, a[class*=" icon-"]:hover:before {
    text-decoration: none;
    color: white;
}

推荐答案

作为 :before伪元素被渲染为其生成元素的后代框(更具体地说，就在第一个子内容框之前)，它遵循 它的正常后代框对 text-decoration 的规则相同:

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 文本装饰覆盖工作?

没有什么好办法解决这个问题...唯一能立即想到的选择是:

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);
}

相关文章