Скользящие подчеркивающие вкладки только для CSS

Question

У нас был набор вкладок на нашем сайте на базе Bootstrap3, который работал нормально.У нас был этот scss-миксин, который

1. вычислял бы количество используемых вкладок на основе класса, который вы применили к nav
2. , поместив псевдоэлемент :: after ниже последнего-потомок li, чтобы сделать "подчеркивание" ширины li с переходом на translateX и translateX из 0
3. , когда данный li получил класс activeпримененный к нему с помощью Bootstrap, переведите элемент ::after на последнем дочернем элементе в правильный процент, чтобы поместить его под активную вкладку

Итак, теперь, обновляя до Bootstrap 4.1, я обнаружил, что он больше неприменяет класс active к li, но к тегу a внутри него.Так что мой родной селектор больше не работает:

.tabs-sliding li:nth-child(2).active ~ li:last-child::after {
  transform: translateX(-300%);
}

Я понимаю, что мог бы сделать это с помощью JavaScript, но я все еще надеюсь на решение только для scss. Вот кодовая ручка со всем кодом.Розовый фон при нажатии на вкладку был просто текстом, подтверждающим класс active.

Вот миксин (также в коде ручки):

@mixin sliding-tabs($tab-number) {
  $children: $tab-number;
  //percentage function converts 1 to 100
  $width: percentage(1 / $children);

  //apply width to .nav-tabs li & a tags
  &.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});
    }
  }
}

Пример использования:

.tabs-sliding {
  @include sliding-tabs(5);
}