我在使用 font Awesome 和
<ul>
使图标直接出现在 :after
中的列表项之后时遇到问题。
具有活动类的
<li>
后面应该有图标,但是当在关闭列表项之前添加另一个 <ul>
时,它会将图标放在整个辅助列表后面。
<div id="thirdLevMenu">
<ul>
<li class="active">Integrated Coastal Watershed Management Plans
<ul>
<li><a href="http://design-irwmp3.migcom.com/app_pages/view/7931">Russian River Integrated Coastal Watershed Management Plan</a></li>
<li><a href="http://design-irwmp3.migcom.com/app_pages/edit/http:/www.goldridgercd.com/watersheds/salmoncreekplan.html" target="_blank">Salmon Creek Coastal Watershed Management Plan</a></li>
<li><a href="http://design-irwmp3.migcom.com/app_pages/edit/http:/www.mattole.org/plan" target="_blank">Mattole Coastal Watershed Management Plan</a></li>
<li><a href="http://design-irwmp3.migcom.com/app_pages/edit/http:/www.trinidad.ca.gov/documents-library/category/30-icwmp.html" target="_blank">Trinidad-Westhaven Coastal Watershed Management Plan</a></li>
</ul>
</li>
</ul>
</div>
我一生都无法弄清楚我做错了什么。
正如我在评论中提到的:
“当您在顶部
<ul>
内添加第二个 <li>
时,整个内部列表将成为父列表项的一部分。它也完全按照您的指示进行操作,它将箭头直接放在 <li>
之后.”
如果您希望图标位于“综合沿海流域管理计划”文本之后,请在该标题周围添加一个跨度,并调整 CSS 以将
:after
伪元素添加到该跨度而不是整个 <li>
。
HTML
<li class="active">
<span class="title">Integrated Coastal Watershed Management Plans</span>
...
</li>
CSS
#thirdLevMenu ul li.active .title:after{
content: '\f0da';
font-family: FontAwesome;
font-weight: normal;
font-style: normal;
margin:0px 0px 0px 10px;
text-decoration:none;
}