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

您可以display:flex使用h1使:after占用剩余空间：

＆＃13;

.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;
}

＆＃13;

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

＆＃13;

：在扩展标记以填充div的剩余宽度之后

1 个答案: