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

Question

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

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

这是解释问题的jsfiddle:

http://jsfiddle.net/JfGVE/500/

这是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 将删除文本修饰:

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

下划线仍然适用于介于两者之间的空间,因为你有一个 - 虽然 - 你可以通过用一个边距抵消伪元素而不是在HTML中放置硬空格来防止这种情况.