如何用CSS实现H1标题后添加对齐右侧页边距的横线？

需求描述 #

为H1标题添加一条粗横线，使其延伸至页面右侧页边距，且无论H1内容长短，横线右端都对齐同一位置。

现有代码 #

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

HTML代码 #

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

现有代码未实现横线长度自适应且右端对齐的效果，需仅用CSS（不使用JavaScript）解决。

解决方案 #

采用Flexbox布局即可实现需求，核心逻辑是让H1作为flex容器，标题文本占用自身宽度，横线元素自动填充剩余空间，确保右端始终对齐页面边缘。

修改后的完整CSS代码如下：

body {
  background-color: #9E7046;
  margin: 0; /* 清除默认边距，保证横线能触达页面最右侧 */
}

body * {
  font-family: 'Helvetica';
}

h1 {
  font-size: 200pt;
  color: #E8E8E8;
  margin-top: 10vh;
  margin-left: 1em;
  display: flex; /* 启用flex布局 */
  align-items: flex-end; /* 让文本与横线底部对齐，保证视觉统一 */
  gap: 0.2em; /* 文本和横线间的固定间距，替代原有left偏移 */
}

h1:after {
  background-color: #262626;
  content: "";
  height: 36px;
  flex: 1; /* 自动填充容器剩余空间，实现自适应长度 */
  /* 移除原伪元素中干扰自适应的position、width、top等属性 */
}

关键说明 #

• body { margin: 0 }：消除浏览器默认的body边距，确保横线能延伸到页面最右侧；
• h1 { display: flex }：将H1转为flex容器，标题文本和横线伪元素作为两个flex子项；
• align-items: flex-end：保证标题文本和横线底部对齐，避免视觉错位；
• gap: 0.2em：设置文本与横线之间的固定间距，替代原有left偏移的作用；
• h1:after { flex: 1 }：让横线自动填充容器内的剩余空间，无论标题文本长短，横线都会延伸到容器最右端（即页面右侧）。

这样修改后，所有H1标题的横线右端都会精准对齐页面右侧，且长度会根据标题内容自动调整。

内容的提问来源于stack exchange，提问作者simone