html - How to keep same pseudo element position

Question

How do I set the position for the pseudo-element so that it doesn't jump to the side at the slightest change in the screen width

HTML

<div class="header-slider">
    <div class="header-slider__container">
        <img src="/images/watch.png" alt="watch" />
        <div class="text">
            <h1>
                Text
            </h1>
            <p>
                Text
            </p>
            <a href="#" class="link">Discover</a>
            <a href="#" class="btn btn--filled">
                    <svg width="22" height="19">
                        <use href="/images/icons/cart.svg#cart" />
                    </svg>
                    Add to cart
            </a>
        </div>
    </div>
</div>

SCSS

.header-slider {
    position: relative;
    margin-top: 90px;
    color: $m-black;

    &::after {
        content: url('/images/lines-1.svg');
        z-index: 2;
        top: -24%;
        right: -14%;
        position: absolute;
        background-repeat: no-repeat;
        pointer-events: none;
    }
    
    &__container {
        position: relative;
        width: 100%;
        height: 505px;
        background-color: $m-light-pink;
        display: flex;
        padding: 50px 200px 50px 0;
    }
}

1440px pseudo el. looks good

1600px pseudo el. slide away

Answer 1

Thank for minus this post, you motivate me to solve problem by myself.

The reason why my pseudo element &::before slide by changing screen width was in element in which i use ::before. When i change it to h1 tag which does not change its width like slider-container all become work right way.