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

时间:2015-05-28 10:21:42

标签: css css3

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

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

以下是解释问题的方法:

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

3 个答案:

答案 0 :(得分:7)

将伪元素设置为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来阻止这种情况。

答案 1 :(得分:1)

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

答案 2 :(得分:0)

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