title: CSS-only sliding underline tabs
body: <p>We had a set of tabs in our Bootstrap3-based site, which worked fine.  We had this scss mixin which would </p>
  
  <ol>
  <li>calculate the number of tabs being used based on the class you applied to the nav</li>
  <li>put an ::after pseudo-element below the last-child <code>li</code> to make an "underline" the width of the <code>li</code> with a transition on <code>translateX</code> and a <code>translateX</code> of 0</li>
  <li>when a given <code>li</code> got a class of <code>active</code> applied to it by Bootstrap, translate the <code>::after</code> element on the last-child the correct percentage to slide it underneath the active tab</li>
  </ol>
  
  <p>So, now updating to Bootstrap 4.1, I discovered that it no longer applies the <code>active</code> class to the <code>li</code>, but to the <code>a</code> tag within it.  So my sibling selector no longer works:</p>
  
  <pre><code>.tabs-sliding li:nth-child(2).active ~ li:last-child::after {
    transform: translateX(-300%);
  }
  </code></pre>
  
  <p>I realize I could do this with javascript, but I'm still hoping for a scss-only solution.  <a href="https://codepen.io/smlombardi/pen/xaQjdy?editors=1100" rel="nofollow noreferrer">Here is a codepen</a> with the entire code.  The pink background when a tab is clicked was just a text to confirm the <code>active</code> class.</p>
  
  <p>Here is the mixin (also in the codepen):</p>
  
  <pre><code>@mixin sliding-tabs($tab-number) {
    $children: $tab-number;
    //percentage function converts 1 to 100
    $width: percentage(1 / $children);
  
    //apply width to .nav-tabs li &amp; a tags
    &amp;.tabs-sliding .nav.nav-tabs li {
      width: $width;
    }
  
    //based on width of each tab, figure out the appropriate offset for the sliding ::after pseudo-element "underline"
    @for $i from 1 through $children {
      li:nth-child(#{$i}) a.active {
        background-color: pink !important;
      }
      li:nth-child(#{$i}) a.active ~ li:last-child::after {
        $offset: percentage($i - $children);
        transform: translateX(#{$offset});
      }
    }
  }
  </code></pre>
  
  <p>Sample usage:</p>
  
  <pre><code>.tabs-sliding {
    @include sliding-tabs(5);
  }
  </code></pre>