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

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.