：在擴展標記以填充div的剩余寬度之后

Question

我有一個帶有：after標簽的h1元素，需要動態擴展以填充包含div的剩余寬度。 基本上它需要有一個calc的寬度（ h1_width - 100％），其中h1寬度未設置或硬編碼。 這可以通過SASS完成，還是需要使用JS選項來操作DOM？ JSfiddle 。

HTML

<div class="text-box__wrap">
  <h1>Hello</h1>
</div>

CSS

  .text-box__wrap {
    width: 100%;
    margin-top: 2em auto 0;
    padding: 0 20px;
  }

  .text-box__wrap h1 {
    margin-bottom: 4%;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    font-size: 12px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    &:after {
      display: inline-block;
      /* Needs to be dynamic based on difference of h1 width and remaining div width */
      width: 50px;
      height: 1px;
      margin-left: 10px;
      content: "";
      vertical-align: 30%;
      background-color: black;
    }
  }

Answer 1

您可以在h1上使用display:flex來創建:after獲取剩余空間之后：

 .text-box__wrap { width: 100%; margin-top: 2em auto 0; padding: 0 20px; box-sizing: border-box; } .text-box__wrap h1 { letter-spacing: 1.5px; text-transform: uppercase; font-size: 12px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; display: flex; align-items: center; } .text-box__wrap h1:after { display: inline-block; height: 1px; flex: 1 1 auto; margin-left: 10px; content: ""; background-color: black; } 

 <div class="text-box__wrap"> <h1>Hello</h1> </div>