Fix after and before in css header-CodePudding

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>

CodePudding user response：

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>

CodePudding user response：

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%);
}