Question

我正在使用a：after方法获取动态Cookie跟踪菜单：

主题＆gt;话题＆gt;话题＆gt;主题

其中“＆gt;”是字体真棒的图标

但我想摆脱“＆gt;”的下划线悬停在主题上时

这是我的代码：

<div id="cookie">

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

我尝试了各种方法：将鼠标悬停在后css上，但没有运气。

Here's my 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;
}

Here是一个工作小提琴。

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

DEMO http://jsfiddle.net/kevinPHPkevin/9k5sf/1/

Answer 4

在Wordpress中使用font-awesome时，我一直在用下划线摔跤。我的解决方案是设置border：0;结果＆＃34;线＆＃34;是一个边界，而不是文字装饰。

使用Font Awesome，如何摆脱悬停下划线？

4 个答案: