ブラウザのサイズ変更後の擬似要素の移動

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に応答可能なブレークポイントを追加して、ナビゲーションバーの幅を変更することもできます。