Javascript 调整浏览器大小后的伪元素移动

我为菜单定义了pseudo元素。看起来是这样的：

每当我单击其他链接时，它都会在该链接下移动：

我这样定义了这个伪元素：

    top: 100%;
    left: 25.8%; //Changed according to the link
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
    border-top-color: #344553;
    border-width: 16px;
    margin-left: -20px;
    @include transition(left 0.7s ease);

要移动伪元素，只需更改“left”属性

问题是，如果我调整浏览器的大小，我的伪元素会向左移动：

有没有办法把它修好？或者使用JS计算其位置？或者可能有一些js库来计算这些东西

---

谢谢大家!

您可以使用

screen.width

查找屏幕的当前宽度。您可以使用它来编写JS函数，根据屏幕的宽度移动伪元素

---

或者，您可以为导航栏元素指定特定屏幕大小的固定宽度，并在CSS中添加响应断点以更改导航栏的宽度。

我将使用另一种方法：使用

.active

类将伪元素添加到菜单项，而不是整个菜单。然后，无论屏幕大小如何，都可以将其置于菜单项下方的中心位置。