title: Put an icon after list item with :after and font awesome
body: <p>I am having a problem getting the icon to appear directly after a list item in a <code>&lt;ul&gt;</code> using font awesome and <code>:after</code>.</p>
  <p>The <code>&lt;li&gt;</code> with the active class should have the icon after it but when another <code>&lt;ul&gt;</code> is added in before closing the list item, it's puts the icon after the entire secondary list.</p>
  <pre><code>&lt;div id=&quot;thirdLevMenu&quot;&gt;
  &lt;ul&gt;
  &lt;li class=&quot;active&quot;&gt;Integrated Coastal Watershed Management Plans
  &lt;ul&gt;
  &lt;li&gt;&lt;a href=&quot;http://design-irwmp3.migcom.com/app_pages/view/7931&quot;&gt;Russian River Integrated Coastal Watershed Management Plan&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;http://design-irwmp3.migcom.com/app_pages/edit/http:/www.goldridgercd.com/watersheds/salmoncreekplan.html&quot; target=&quot;_blank&quot;&gt;Salmon Creek Coastal Watershed Management Plan&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;http://design-irwmp3.migcom.com/app_pages/edit/http:/www.mattole.org/plan&quot; target=&quot;_blank&quot;&gt;Mattole Coastal Watershed Management Plan&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href=&quot;http://design-irwmp3.migcom.com/app_pages/edit/http:/www.trinidad.ca.gov/documents-library/category/30-icwmp.html&quot; target=&quot;_blank&quot;&gt;Trinidad-Westhaven Coastal Watershed Management Plan&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  <p>I can't for the life of me figure out what I am doing wrong.</p>
  <p><a href="https://jsfiddle.net/RWqTj/" rel="nofollow noreferrer">Here's my jsfiddle</a></p>