CSS 在列表项之后放置一个图标：after 和字体真棒
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/18793428/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Put an icon after list item with :after and font awesome
提问by tyler_lisa
I am having a problem getting the icon to appear directly after a list item in a ul using font awesome and :after.
我在使用字体 awesome 和 :after 使图标直接出现在 ul 中的列表项之后时遇到问题。
The li with the active class should have the icon after it but when another ul is added in before closing the list item, it's puts the icon after the entire secondary list.
具有活动类的 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>
I can't for the life of me figure out what I am doing wrong.
我一生都无法弄清楚我做错了什么。
Thanks in advance!!
提前致谢！！
回答by Jason
As I mentioned in the comment:
正如我在评论中提到的：
"When you add that second <ul>inside the top <li>, that entire inside list becomes part of the parent list item. It's doing exactly what you're telling it too, it's putting the arrow directly after the <li>."
“当您<ul>在 top 中添加第二个时<li>，整个内部列表将成为父列表项的一部分。它也完全按照您的要求进行操作，它将箭头直接放在<li>.之后。”
If you want the icon to go after the text reading "Integrated Coastal Watershed Management Plans" instead, add a span around that title and tweak your CSS to add the :afterpseudo element to that span instead of the entire <li>.
如果您希望图标出现在“综合沿海流域管理计划”文本之后，请在该标题周围添加一个跨度并调整您的 CSS 以将:after伪元素添加到该跨度而不是整个<li>.
HTML
HTML
<li class="active">
<span class = "title">Integrated Coastal Watershed Management Plans</span>
...
</li>
CSS
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;
}
