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 on the after css 的各种方法，但没有成功。

Here's my jsfiddle

Answer 1

您在整个链接 a 上执行 :after，而不是 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是一个工作 fiddle 。