Question

如何才能将下划线仅应用于a元素而不应用于：after？

使用下面的CSS可以控制：after元素之后的颜色：悬停。但是，文本修饰无法更改。

以下是解释问题的方法：

这是CSS：

a {
    color: green;
    text-decoration: none;
}
a:hover {
    color: green;
    text-decoration: underline;
}
a:after {
    font-family: FontAwesome;
    content: "\f061";
}

a:hover:after {
    color: orange;
    text-decoration: none !important;
}

Answer 1

将伪元素设置为display: inline-block will remove the text decoration：

a:after {
    font-family: FontAwesome;
    content: "\f061";
    display: inline-block;
}

下划线仍然适用于中间的空格，因为您有 ，但您可以通过offsetting the pseudo-element with a margin instead of putting hard spaces in the HTML来阻止这种情况。

Answer 2

afelixj在这里几乎是最好的答案，但它有一个不可点击的空间，即使你删除了标记中的所有实际空间。要解决此问题，只需在锚点上使用padding-right创建放置图标的空间，然后将其放在right: 0：http://jsfiddle.net/JfGVE/591/。内联块将图标视为一个字符，它将像文本一样包装。

Answer 3

添加display：inline-block;到：之后

a {
    color: green;
    text-decoration: none;
}

a:hover {
    color: green;
    text-decoration: underline;
}

a:after {
    display: inline-block;
    font-family: FontAwesome;
    content: "\f061";
}

a:hover:after {
    color: orange;
    text-decoration: none;
}

组合：之后：悬停用于字体图标的文本修饰

3 个答案: