如何保持相同的伪元素位置

Question

如何设置伪元素的位置，使其不会在屏幕宽度发生微小变化时跳到一边

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>

scs-

.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伪图像看起来不错

1600像素伪el。滑动式

Answer 1

谢谢你减去这篇帖子，你激励我自己解决问题。

我的伪元素&::before通过改变屏幕宽度滑动的原因是在我使用::before的元素中。当我把它改为h1标签时，它不会像slider-container那样改变它的宽度，所有这些都变成了正确的工作方式。