Fix after and before in css header [closed] - html

Question

Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 months ago.
Improve this question
Can't understand why this code is working in my first html, but here isn't. When i add any text instead space in content it works. I need just 2 lines around headerBuy_bs. And any text for accept.
.buyBox_bs {
grid-area: 2/2/2/3;
width: max-content;
margin: auto;
margin-top: 5vmin;
}
.headerBuy_bs {
color: black;
margin-bottom: $gor-10 * 3;
text-align: center;
font-size: $font-24;
margin-top: $gor-10 * 3;
}
.headerBuy_bs:after {
content: "";
height: 2.09vh;
width: 4.48vw;
background: linear-gradient(
to right,
#f7c901 0%,
#f7ca0181 50%,
rgba(255, 255, 255, 0) 100%
);
position: relative;
top: 50%;
right: 22%;
}
.headerBuy_bs:before {
content: "";
height: 0.09vh;
width: 4.48vw;
background: linear-gradient(
to left,
#f7c901 0%,
#f7ca0181 50%,
rgba(255, 255, 255, 0) 100%
);
position: relative;
top: 50%;
left: 22%;
}
<div class='buyBox_bs'>
<div class='headerBuy_bs'>hello</div>
</div>

Answer 1

Just add display:inline-block; to .headerBuy_bs::after and .headerBuy_bs::before
.buyBox_bs {
grid-area: 2/2/2/3;
width: max-content;
margin: auto;
margin-top: 5vmin;
}
.headerBuy_bs {
color: black;
margin-bottom: $gor-10 * 3;
text-align: center;
font-size: $font-24;
margin-top: $gor-10 * 3;
}
.headerBuy_bs::after {
content: "";
display:inline-block;
height: 2.09vh;
width: 4.48vw;
background: linear-gradient(
to right,
#f7c901 0%,
#f7ca0181 50%,
rgba(255, 255, 255, 0) 100%
);
position: relative;
top: 50%;
right: 22%;
}
.headerBuy_bs::before {
content: "";
display:inline-block;
height: 0.09vh;
width: 4.48vw;
background: linear-gradient(
to left,
#f7c901 0%,
#f7ca0181 50%,
rgba(255, 255, 255, 0) 100%
);
position: relative;
top: 50%;
left: 22%;
}
<div class='buyBox_bs'>
<div class='headerBuy_bs'>hello</div>
</div>

Answer 2

May you add position: absolute; to .headerBuy_bs:before and .headerBuy_bs:after and for .headerBuy_bs add position: relative;
.headerBuy_bs {
position: relative;
}
.headerBuy_bs:after {
position: absolute;
right: -100%;
top: 50%;
transform: translateY(-50%);
}
.headerBuy_bs:before {
position: absolute;
left: -100%;
top: 50%;
transform: translateY(-50%);
}