如何在Chrome上制作一次性jQuery导航栏

Question

我制作了一个导航栏，该导航栏使用伪元素来显示活动链接。栏会根据导航栏项目div的宽度进行调整。每当用户调整窗口大小时，都会重新计算宽度和位置。我使用.ready和.ready初始化加载时的大小，如下所示：

 $(document).ready(resizeActiveBar);

这对Chrome和Edge都很好。但是，当用户调整窗口大小时，条的宽度和位置将不正确，因此我们必须对其进行调整。我使用.resize（）如下：

$(window).resize(resizeActiveBar);

这是函数：

function resizeActiveBar() {
var len = $(".navbar-items").width(); // get the width of the button
$(".navbar-active").append(
  "<style>.navbar-active > a::after {width: " +
    len +
    "px !important; margin-left: -" +
    len / 2 +
    "px !important;}</style>"  // change the width and position
);
}

这在Edge上效果很好，但是在Chrome上根本无法正常工作。欢迎任何帮助和建议。 这里是fiddle，其中包含所有内容。在Chrome和Edge上都可以尝试