css - 使用 Font Awesome，如何摆脱悬停时的下划线？

Question

我正在为动态 cookie 跟踪菜单使用 a:after 方法：

话题 > 话题 > 话题 > 话题

其中“>”是来自 font awesome 的图标

但是当悬停在主题上时，我想摆脱“>”中的下划线

这是我的代码：

<div id="cookie">

 <ul>
<li><a href='#'>Leaders</a> </li>
<li><a href='#'>Topic</a> </li>
<li>Topic</li>
</ul>

我尝试了各种 a:hover 的方法，但没有运气。

这是我的jsfiddle

Answer 1

您:after在整个链接上进行操作a，而不是li. 请改为执行以下操作。

#cookie ul li:after { //changed this line
content: '\f105';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
text-decoration:none;
padding:0px 0px 0px 12px;
}

这是一个工作小提琴。

Answer 2

改为使用:after。li

#cookie ul li:after {
    content: '\f105';
    font-family: FontAwesome;
    font-weight: normal;
    font-style: normal;
    text-decoration:none;
    padding:0px 0px 0px 12px;
}

Answer 3

将其添加到li元素

您需要从最后一个孩子中删除令人敬畏的字体以保持一致性

#cookie ul li:after {
     content: '\f105';
     font-family: FontAwesome;
     font-weight: normal;
     font-style: normal;
     text-decoration:none;
     padding:0px 0px 0px 12px;
}
#cookie ul li:last-child:after {
    content: '';
    font-family: FontAwesome;
}

演示http://jsfiddle.net/kevinPHPkevin/9k5sf/1/

Answer 4

在 Wordpress 中使用 font-awesome 时，我一直在与下划线作斗争。我的解决方案是设置边界：0；原来“线”是一个边框，而不是一个文本装饰。