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

Answer 1

插入显示：inline-block;在你的CSS。像下面这样的东西：

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

这是JS FIDDLE：

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

Answer 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'属性不会对祖先的装饰产生任何影响。

有关详细信息，请参阅以下答案：

没有任何好办法......立即想到的唯一选择是：

将文字换成自己的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);
}

Answer 3

你可以设置身高和数量溢出：隐藏为：在元素之前，文本修饰将不可见：）

Answer 4

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

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

Answer 5

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

这里有一个实例：http://jsfiddle.net/skip405/fQHUH/

Answer 6

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

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


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

：悬停：在text-decoration之前没有效果？

6 个答案: