html - 将线放在 h1 的左侧和右侧

Question

我有这个 fiddle ，我想做的是在调整窗口大小时将线直接放在 h1 的左侧和右侧，并分别缩放。所以它应该看起来像这样。

----This that this
    Here we go-----

我附上了 fiddle 。我试过将 div 向左浮动并使其成为绝对的，但我没有运气。我只留下了一个 div，它是一个红色条，并删除了另一个。一旦我学会了做一个，我就可以做另一个。感谢您的帮助。

HTML

    <h1 class="mainPageTopText">
      Find this that this.
      <div class="banner-bottom"></div>
    </h1>

    <h1 class="mainPageBottomText">
      Here we go.
    </h1>
  </div>
</div>

CSS

.mainPageWriting {
  display: flex;
}

.mainPageTopText {
  width: 500px;
  position: absolute;
  margin-right: 400px;
  margin-top: 50px;
  z-index: 12;
  font-family: 'Luxim';
  background: rgba(255, 255, 255, 1.0);
  color: black;
}

.banner-bottom {
  height: 10px;
  width: 100%;
  left: 0;
  position: absolute;
  background-color: red;
  z-index: 100;
}

.mainPageBottomText {
  position: absolute;
  margin-top: 100px;
  padding-left: 100px;
  z-index: 12;
  font-family: 'Luxim';
  background: rgba(255, 255, 255, 1.0);
  color: black;
}

.centered {
  background: #1D2731;
  display: flex;
  align-items: left;
  justify-content: center;
  height: 100%;
}

.banner-bottom {
  height: 10px;
  width: 100%;
  left: 0;
  position: absolute;
  background-color: red;
  z-index: 100;
}

fiddle https://jsfiddle.net/angatvir/aujrkpLk/183/

Answer 1

希望这就是你要的答案

基于

----This that this
    Here we go-----

不是

----This that this Here we go-----

#special {
}
#first {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: "line text .";
}
#first .line {
  grid-area: line;
  height: 5px;
  align-self: center;
  background: red;
}
#first .text {
  grid-area: text;
}
#second {
  display: grid;
  grid-area: text-below;
  grid-template-columns: 1fr auto 1fr;
  grid-template-areas: ". text line";
}

#second .line {
  grid-area: line;
  height: 5px;
  align-self: center;
  background: green;
}
#second .text {
  grid-area: text;
}

<h1 id="special">
  <span id="first">
  <span class="text">This that this</span>
  <span class="line"></span>
  </span>
  <span id="second">
  <span class="text">Here we go</span>
  <span class="line"></span>
  </span>
</h1>