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

Issue

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

Solution

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.

Answered By - Jason