title: :after pseudo-element not appearing
body: <p>I'm building a scalable mobile menu icon and the :after pseudo class is not working. This is intended to create 3 black lines to represent the "hamburger" menu icon. The first line is created, the second line is created using the :before pseudo class, however the :after pseudo class is not rendering, thus the third black line is not appearing.</p>
  
  <p>JS Fiddle - <a href="https://jsfiddle.net/eeks1swx/" rel="nofollow">https://jsfiddle.net/eeks1swx/</a></p>
  
  <p>I'm not entirely sure why and I can't seem to figure it out. Any thoughts?</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.hamburger {
    height: 15px;
    width: 20px;
    position: relative;
    display: block;
    cursor: pointer;
    box-sizing: border-box;
  }
  .hamburger__line:before,
  .hamburger__line:after,
  .hamburger__line {
    position: absolute;
    height: 20%;
    background-color: #000;
    width: 100%;
    border-left: 0;
    border-right: 0;
    top: 40%;
  }
  .hamburger__line:before,
  .hamburger__Line:after {
    content: "";
    height: 100%;
  }
  .hamburger__line:before {
    top: -200%;
  }
  .hamburger__line:after {
    top: 200%;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hamburger"&gt;
    &lt;div class="hamburger__line"&gt;&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>