如何才能将下划线仅应用于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;
}
答案 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: 0
:http://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;
}