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

Question

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

score 50 · Accepted Answer

插入显示：inline-block；在你的 CSS 中。类似于以下内容：

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

这是 JS 小提琴：

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

score 30 · Accepted Answer

由于伪元素被渲染为其生成元素的后代框（:before更具体地说，就在第一个子内容框之前），它遵循与正常后代框有关的相同规则text-decoration：

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

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

没有任何好的方法可以解决这个问题......唯一可以立即想到的选择是：

将文本包装在自己的span元素中，然后应用text-decoration到 that span，如 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 矢量背景图像，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);
}

score 4 · Accepted Answer

4

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

于 2012-11-14T10:08:51.140 回答

score 4 · Accepted Answer

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

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

score 2 · Accepted Answer

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

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

score 0 · Accepted Answer

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

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


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

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

6 回答 6

Related

Reference