从标题文本末尾到容器末尾添加一行

Question

我使用此 CSS 从标题文本的末尾到容器的末尾绘制一条线：

h1 {
  display: flex;
}

h1::after {
  content: "";
  flex: auto;
  border-bottom: 3px solid #08A7FC;
  margin-bottom: 0.25em;
}

在标题文本长于一行之前，这种方法效果很好，因为这样 h1 就会占据容器的整个宽度。还有其他解决方案可以实现这一目标吗？我已经尝试了在标题标记末尾添加一条长黑线的所有方法，但没有任何效果。要么这条线出现在不该出现的地方，要么根本就没有这条线。

Answer 1

所以，在写这个问题的过程中我已经找到了解决方案。我修改了 添加一个已接受的答案标题标记末尾的长黑线，通过将“顶部”替换为“底部”

h1::after {
    background: #08A7FC;
    content: "";
    display: inline-block;
    height: 3px;    
    position: absolute;
    bottom: 0.25em;
    width: 100%;
}
h1 {
    overflow: hidden;
    position: relative;
}