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

Posted 2023-03-06

【中文标题】:hover:before text-decoration none 没有效果？

【英文标题】：:hover:before text-decoration none has no effects?

【发布时间】：2012-07-13 13:23:06

【问题描述】：

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

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

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

[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;

【问题讨论】：

你不能用伪元素做到这一点。你将不得不使用 JS。

是的，如果没有 js，你不能像这样将伪元素和伪类加倍。我建议使用 javascript 来处理 :before 而不是处理 :hover。这是因为 :before 并非所有浏览器都支持。但这只是我的 2 美分..

@BumbleB2na 至少 IE8+、FF10.0.2+、Opera 11.61+、Safari 5.1.2+、Chrome 17 quirksmode.org/css/contents.html

@BumbleB2na：你可以——伪元素必须是选择器中的最后一个。

我注意到类和属性选择器中有一些拼写错误，并不是说这些与手头的问题有关。值得注意的是，您的 icon-large 属性选择器可以简单地更改为 .icon-large:before （但我假设您仅将其作为独立类而不是其他类的前缀）。

【参考方案1】：

插入显示：内联块；在你的 CSS 中。类似于以下内容：

.icon-mail:before 
    content: "\37";
    display:inline-block;
    text-decoration:none;

这里是 JS FIDDLE：

http://jsfiddle.net/73p2k/18/

【讨论】：

非常感谢这个技巧。从来没有想过添加它。

@acme，请查看最新的 jsfiddler 以获得 IE 支持。在IE9中测试jsfiddle.net/73p2k/18

因此对于 IE，您必须将 text-decoration:underline; 设置为 a:before 并将 text-decoration:none; 设置为 a:hover:before。好像是bug。感谢 Pinoy2015！

什么？这实际上有效......并且仅适用于内联块......你能解释一下为什么它会这样吗？你是如何得出这个结论的？

就我而言，这是实际的解决方案。

【参考方案2】：

作为其生成元素的the :before pseudo-element is rendered as a descendant box（更具体地说，就在第一个子内容框之前），它服从the same rules its normal descendant boxes do with respect to text-decoration：

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

有关详细信息，请参阅这些答案：

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。缺点当然是额外的标记。

使用您的: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);

【讨论】：

非常感谢您的宝贵时间和出色的解释。我会选择额外的标记解决方案。

查看下面的最新答案。

【参考方案3】：

伪元素选择器必须是选择链中的最后一项。

您可以将样式应用于element:hover:before，但不能应用于element:before:hover。

【讨论】：

确实是……标题错了，问题是对的。正在修复它。

【参考方案4】：

您可以为 :before 元素设置高度和溢出：隐藏，并且文本装饰将不可见:)

【参考方案5】：

仅使用 a 标记作为标记尝试了一些事情，但唉。您可能的解决方法可能是将链接内部包装在另一个元素中，例如span。因此，您可以在该元素上添加下划线（而不是伪元素）——这完全由 css 控制。

这里有一个活生生的例子：http://jsfiddle.net/skip405/fQHUH/

【参考方案6】：

这个解决方案对我有用。它排除了伪元素。 但是为此，您需要将<a> 标记的内容包装到一个额外的元素中。

a:hover  text-decoration: none; 
a:hover > *  text-decoration: underline; 


<a href="#"><span>content</span></a>