title: css pseudo element is hidden by subsequent container with float property
body: <p>I have two columns </p>
  
  <ol>
  <li>Tab navigation</li>
  <li>Tab form</li>
  </ol>
  
  <p>The tab navigation column has a couple of links which upon click would open a form in the 2nd column</p>
  
  <p>I'm setting up a tool-tip for each link in the tab navigation column like the below (<code>.scss</code>)</p>
  
  <pre><code>ul{
    .tooltip{
      // display: inline;
      position: relative;
      transition: all 0.5s ease-in;
      &amp;:hover:after{
        background: #333;
        background: rgba(0,0,0,.8);
        border-radius: 5px;
        bottom: -5px;
        color: #fff;
        content: attr(title);
        // left: 140%;
        padding: 5px 15px;
        position: absolute;
        z-index: 1;
        width: auto;
      }
      &amp;:hover:before{
        border: solid;
        border-color: #333 transparent;
        border-top: 6px solid transparent;
        border-bottom: 6px solid transparent;
        border-right: 6px solid #727272;
        bottom: 5px;
        content: "";
        left: 125%;
        position: absolute;
        z-index: 99;
      }
    }
  }
  </code></pre>
  
  <p>However , the tooltips seem to appear hidden by the form container despite giving them a higher z-index.</p>
  
  <p><a href="https://i.stack.imgur.com/oqNjK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/oqNjK.png" alt="enter image description here"></a></p>
  
  <p>The form column does not have a z-index and has a <code>float:left</code> attribute set.</p>
  
  <p>How do i have the after element come on top of the form column.</p>
  
  <p>**EDIT: it appears as though the width is restricted by the width of the tabnav parent **</p>
  
  <p><a href="https://i.stack.imgur.com/BXvbZ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/BXvbZ.png" alt="enter image description here"></a></p>
  
  <p>the <code>.tab-nav</code> has the following css (using bourbon neat)</p>
  
  <pre><code>  .tab-nav {
      @include span-columns(4);
      max-height: 70vh;
      overflow-y: auto;
  }
  </code></pre>
  
  <p>Thanks,</p>