title: Evenly spaced, justified horizontal nav links: How to remove vertical space in empty :after content
body: <p>I'm trying to achieve horizontal navigation links like this:</p>
  
  <pre><code>|--------------------------------------| 
  |Link1   L2   LongLink3   Link4   Link5|
  |--------------------------------------|
  </code></pre>
  
  <p>Rules:</p>
  
  <ul>
  <li>Links are evenly spaced (same amount of white space between each link)</li>
  <li>Links can be variable-width </li>
  <li>Collectively the links stretch across the entire available width of their container </li>
  <li>First and last links are lined up with the eges of their container (links are justified)</li>
  <li>Works on IE8+ </li>
  <li>CSS/HTML solution, no JavaScript </li>
  <li>Can not set a specific container height or link height</li>
  <li>Can not pre-calculate and hard-code the space between the links (number of links could change later)</li>
  </ul>
  
  <p><a href="https://stackoverflow.com/questions/5060923/how-to-stretch-html-css-horizontal-navigation-items-evenly-and-fully-across-a/17951253#17951253">This solution</a> almost works--it's so close. But introducing the empty :after content adds unwanted additional vertical space in the nav container (why?). Is there a way to remove the extra vertical space injected by the empty :after content?</p>
  
  <p>HTML that almost works:</p>
  
  <pre><code>&lt;ul id="nav"&gt;
      &lt;li&gt;&lt;a href="#"&gt;HOME&lt;/a&gt;&lt;/li&gt;  &lt;!--
      --&gt;&lt;li&gt;&lt;a href="#"&gt;ABOUT&lt;/a&gt;&lt;/li&gt;  &lt;!--
      --&gt;&lt;li&gt;&lt;a href="#"&gt;BASIC SERVICES&lt;/a&gt;&lt;/li&gt;  &lt;!--
      --&gt;&lt;li&gt;&lt;a href="#"&gt;OUR STAFF&lt;/a&gt;&lt;/li&gt;  &lt;!--
      --&gt;&lt;li&gt;&lt;a href="#"&gt;CONTACT US&lt;/a&gt;&lt;/li&gt;&lt;!--
  --&gt;&lt;/ul&gt;&lt;!--
  --&gt;&lt;h2&gt;next element&lt;/h2&gt;
  </code></pre>
  
  <p>CSS that almost works:</p>
  
  <pre><code>* {
      padding: 0;
      margin: 0;
  }
  #nav {
      text-align: justify;
      outline: 1px solid grey;
  }
  #nav:after {
      content: '';
      display: inline-block;
      width: 100%;
  }
  #nav li {
      display: inline-block;
      background-color: green;
  }
  #nav a:link {
      display: block;
      color: white;
      padding: 1em 0;
  }
  </code></pre>
  
  <p><a href="http://jsfiddle.net/wzrmy/1/" rel="nofollow noreferrer">jsfiddle</a> showing what this looks like, as well as the extra vertical space injected by the :after content. The "next element" should be directly below the nav links. Thanks.</p>