Html 仅CSS滑动下划线选项卡

我们在基于Bootstrap3的站点上有一组选项卡，运行良好。我们有一个scss混音器

根据应用于导航的类别计算正在使用的选项卡数

在最后一个子元素

li

下方放置一个：：after伪元素，在

li

的宽度上画一条“下划线”，并在

translateX

上进行转换，将

translateX

设置为0

当给定的

li

通过引导应用了一个

活动的
类时，翻译
：：在最后一个子元素上的
元素之后，按正确的百分比将其滑动到活动选项卡下方

因此，现在更新到bootstrap4.1，我发现它不再将

active

类应用于

li

，而是应用于其中的

a

标记。因此，我的兄弟选择器不再工作：

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

我意识到我可以用javascript实现这一点，但我仍然希望有一个只有scss的解决方案。用整个代码。单击选项卡时的粉红色背景只是确认

活动类的文本

这是mixin（也在codepen中）：

示例用法：

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

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