调整浏览器大小后，伪元素会发生变化

Question

我为我的菜单定义了伪元素。它看起来像这样：

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

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

    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);

要移动我的伪元素，我只需更改“左”属性。

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

有没有办法让它修好？或者用JS计算它的位置？或者也许有一些js库来计算这些东西？

谢谢！

Answer 1

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

或者，您可以为某些屏幕尺寸提供固定宽度的导航栏元素，并在CSS中添加响应断点以更改导航栏的宽度。