Put an icon after list item with :after and font awesome

Question

I am having a problem getting the icon to appear directly after a list item in a ul using font awesome and :after.

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.

<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.

Here's my jsfiddle

Thanks in advance!!

Answer 1

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>."

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 :after pseudo element to that span instead of the entire <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;

} 

Here's an updated fiddle.