在css头中修正前后

Question

我不明白为什么这段代码在我的第一个html中工作，但这里没有。当我在内容中添加任何文本而不是空间时，它会工作。我只需要headerBuy_bs周围的两条线。以及任何要接受的短信。

​

.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

只需将display:inline-block;添加到.headerBuy_bs::after和.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

请将position: absolute;添加到.headerBuy_bs:before和.headerBuy_bs:after中，.headerBuy_bs添加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%);
}

​