我想有h1標題后面是一條粗線，到頁面的右邊距。

有點像這樣:

除了我希望所有的黑線都在右邊的同一點結束——與h1內容的長度無關。

我已經做到這一步了:

body {
  background-color: #9E7046
}

body * {
  font-family: 'Helvetica'
}

h1 {
  font-size: 200pt;
  color: #E8E8E8;
  margin-top: 10vh;
  margin-left: 1em
}

h1:after {
  background-color: #262626;
  content: "";
  display: inline-block;
  height: 36px;
  position: relative;
  vertical-align: bottom;
  width: 50%;
  top: -52px
}

h1:after {
  left: 0.2em;
  margin-right: -50%;
  width: 12em;
}

<h1>Short</h1>
<h1>Longer</h1>
<h1>Very<br/>long</h1>

考慮對每個& lth1 & gt。然后，您可以使用flex-grow將該行擴展到文本留下的剩余空白區域。

body {
  background-color: #9E7046
}

body * {
  font-family: 'Helvetica'
}

h1 {
  display: flex;
  font-size: 200pt;
  color: #E8E8E8;
  margin-top: 10vh;
  margin-left: 1em
}

h1:after {
  background-color: #262626;
  content: "";
  height: 36px;
  align-self: flex-end;
  flex-grow: 1;
}

<h1>Short</h1>
<h1>Longer</h1>
<h1>Very<br/>long</h1>