Блог

Как мне установить позицию для псевдоэлемента, чтобы он не перемещался в сторону при малейшем изменении ширины экрана

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;

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

1440 пикселей псевдо-эл. выглядит хорошо

1600 пикселей псевдо-эл. сдвиньте

Спасибо за минус этого поста, вы мотивируете меня решать проблему самостоятельно.

Причина, по которой мой псевдоэлемент amp;::before скользит, изменяя ширину экрана, была в элементе, в котором я использую ::before . Когда я меняю его на h1 тег, который не изменяет его ширину, как slider-container и все, все становится правильным.