title: Mysterious white space outside of HTML flow?
body: <p>I have a simple div wrapper with four spans inside.</p>
  
  <pre><code>&lt;body&gt;
    &lt;main&gt;
      &lt;div&gt;
        &lt;span&gt;One&lt;/span&gt;
        &lt;span&gt;Two&lt;/span&gt;
        &lt;span&gt;Three&lt;/span&gt;
        &lt;span&gt;Four&lt;/span&gt;
      &lt;/div&gt;
    &lt;/main&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>The div is positioned absolutely so that I can get it to touch the bottom of the screen, and text-align is justify so the spans inside are evenly spaced. This works fine until I try to make my spans height: 100%, then a mysterious white space appears outside of the actual  flow on the very bottom. I think this has something to do with my div:after psudo-element but I have absolutely no idea what's going on.</p>
  
  <pre><code>* {
    padding: 0;
    margin: 0;
  }
  
  main {
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: rgb(45, 45, 65);
    text-align: center;
  }
  
  div {
    position: absolute;
    top: 50%;
    left: 25%;
    right: 25%;
    bottom: 0;
    text-align: justify;
    display: block;
  }
  
  div:after {
    display: inline-block;
    width: 100%;
    content: '';
  }
  
  span {
    background-color: rgb(25, 25, 45);
    box-sizing: border-box;
    display: inline-block;
    font-size: 1em;
    padding: 10px;
    height: 100%;
  }
  
  span:hover {
    background-color: white;
  }
  </code></pre>
  
  <p>Do I not understand how :after works, or is this some kind of a glitch? Where in the world is that white spacing coming from on the bottom?</p>
  
  <p>Here's a reproduction of the problem: <a href="http://codepen.io/anon/pen/qdpERR?editors=110" rel="nofollow">http://codepen.io/anon/pen/qdpERR?editors=110</a></p>