组合：使用：悬停文本装饰的字体图标 [英] Combine :after with :hover for text-decoration of a font icon

问题描述

如何得到下划线只适用于a元素而不适用于：after？

How can one get the underline to only apply to the a element and not to the content of the :after?

下面的CSS可以控制颜色of：after元素on：hover。

With the CSS below one can control the color of an :after element on :hover. However, the text-decoration cannot be changed.

这里是jsfiddle来说明问题：

Here's the jsfiddle to illustrate the problem:

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

推荐答案

display：inline-block 将删除文本修饰< a>：

Setting the pseudo-element to display: inline-block will remove the text decoration:

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

下划线仍然适用于两者之间的空格， c $ c>& nbsp; ，但您可以抵消伪元素具有边距，而不是在HTML中加入空格。

The underline will still apply to the space in between because you have an  , though — you can prevent this by offsetting the pseudo-element with a margin instead of putting hard spaces in the HTML.

这篇关于组合：使用：悬停文本装饰的字体图标的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！