问题

Sure, here's the translated code portion:

我希望h1标题后面跟着一条粗线，该线条延伸到页面的右边缘。

就像这样：

[![enter image description here][1]][1]

不过，我希望所有的黑线都在x轴上以相同的点结束，与h1内容的长度无关。

我用以下代码实现了这一点：

```css
<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->
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;
}
<!-- language: lang-html -->
<h1>Short</h1>
<h1>Longer</h1>
<h1>Very<br/>long</h1>
<!-- end snippet -->

但是，我无法弄清楚如何使这些线具有可变长度并在x轴上以相同的点结束。

如何使用CSS（无需JavaScript）实现这一点？

请注意，我只提供了代码的翻译部分，没有包括问题或其他内容。

<details>
<summary>英文:</summary>

I would like to have h1 headers be followed by a thick line that goes to the right margin of the page.

Kind of like this:

[![enter image description here][1]][1]

except that I would like all the black lines to end at the same point on the right - independently of the length of the h1 content.

I got this far with this:

&lt;!-- begin snippet: js hide: false console: true babel: false --&gt;

&lt;!-- language: lang-css --&gt;

    body {
      background-color: #9E7046
    }

    body * {
      font-family: &#39;Helvetica&#39;
    }

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

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

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

&lt;!-- language: lang-html --&gt;

    &lt;h1&gt;Short&lt;/h1&gt;
    &lt;h1&gt;Longer&lt;/h1&gt;
    &lt;h1&gt;Very&lt;br/&gt;long&lt;/h1&gt;

&lt;!-- end snippet --&gt;

but I can&#39;t figure how to get the lines to have variable length and end at the same point on the x axis.

How can I do that with CSS (no javascript)?


  [1]: https://i.stack.imgur.com/Wv06C.png

</details>


# 答案1
**得分**: 1

考虑对每个`<h1>`元素使用[水平弹性布局](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_flexible_box_layout/Basic_concepts_of_flexbox)。然后可以使用`flex-grow`将该行扩展到文本留下的剩余空间中。

```css
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>

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>