css - 结合:after with :hover for text-decoration of a font icon

Question

如何让下划线仅适用于 a 元素而不适用于 :after 的内容？

使用下面的 CSS 可以控制 :hover 上的 :after 元素的颜色。但是，text-decoration 不能更改。

这是说明问题的 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 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 来防止这种情况发生。 .