title: Firefox ::after pseudo element not working
body: <p>I have a CSS class which outputs a line after a title</p>
  <p><img src="https://i.stack.imgur.com/wIUdo.png" alt="enter image description here" /></p>
  <p>This works in Safari and Chrome but in Firefox the line is not appearing.</p>
  <p>My Code:</p>
  <pre><code>.sidebar h2 {
      color: #f7f7f7;
      width: 100%;
      font-size: 24px;
      position: relative;
  }
  
  .sidebar h2 span {
      background-color: #40d1b0;
      padding-right: 2px;
  }
  .sidebar h2::after {
      content:&quot;&quot;;
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      height: 0.22em;
      border-top: 1px solid rgba(0,0,0,0.10);
      z-index: -1;
  }
  
  &lt;h2&gt;&lt;span&gt;Show&lt;/span&gt;&lt;/h2&gt;
  </code></pre>
  <p>The container div has a class of <code>Sidebar</code></p>
  <h2>EDIT</h2>
  <p>JSFiddle as requested</p>
  <p><a href="http://jsfiddle.net/jerswell/Lxsmt96k/" rel="nofollow noreferrer">http://jsfiddle.net/jerswell/Lxsmt96k/</a></p>