Pseudo-classes after getting horizontal scroll bar [duplicate] - html

Question

This question already has an answer here:
Image displaying behind the section after using overflow hidden
(1 answer)
Closed 3 years ago.
I am using a css pseudo-classes. I tried before and after. There is no issue with before I am getting the horizontal scroll when using after class.
I don't want to use overflow: hidden;. If I use overflow then my image is displaying behind the first section.
Would you help me out with these issues?
This is the before class which is working.
.container {
width: 1140px;
margin: auto;
}
/*.test1{position: relative;}*/
.test1:before {
content: "";
background-image: url('https://w0.pngwave.com/png/546/532/computer-icons-sales-label-sale-icon-png-clip-art.png');
background-repeat: no-repeat;
background-size: contain;
width: 350px;
height: 308px;
display: block;
position: absolute;
top: -15%;
left: -10%;
}
<div class="container">
<section class="test1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>
This is the after class which is not working. I am getting scrollbar
section {
height: 400px;
position: relative;
}
.test1 {
overflow: hidden;
}
.test1:after {
content: "";
background-image: url('https://www.netclipart.com/pp/m/16-165891_sale-price-tag-png-sale-icon-png.png');
background-repeat: no-repeat;
background-size: contain;
width: 350px;
height: 308px;
display: block;
position: absolute;
top: -15%;
right: -10%;
}
<section style="background-color: #f8f8f8;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<section class="test1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
I am getting the output
My expected output

Answer 1

Please add css
body {position: relative;}
.test1:after {
content: "";
background-image: url(https://www.netclipart.com/pp/m/16-165891_sale-price-tag-png-sale-icon-png.png);
background-repeat: no-repeat;
background-size: 100%;
width: 350px;
height: 400px;
display: block;
position: absolute;
top: 0;
right: 0;
}

Answer 2

.container {
width: 1140px;
margin: auto;
max-width: 100%;
}
/*.test1{position: relative;}*/
.test1 {position: relative; overflow: hidden; }
.test1:before {
content: "";
background-image: url('https://w0.pngwave.com/png/546/532/computer-icons-sales-label-sale-icon-png-clip-art.png');
background-repeat: no-repeat;
background-size: contain;
width: 350px;
height: 308px;
display: block;
position: absolute;
top: -15%;
left: 0;
}
.test1:after {
content: "";
background-image: url('https://www.netclipart.com/pp/m/16-165891_sale-price-tag-png-sale-icon-png.png');
background-repeat: no-repeat;
background-size: contain;
width: 350px;
height: 308px;
display: block;
position: absolute;
top: -15%;
right: -40%;
}
<div class="container">
<section class="test1">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</section>
</div>