我使用這個CSS從標題文本的末尾到容器的末尾畫一條線:

h1 {
  display: flex;
}

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

在標題文本長于一行之前，這種方法非常有效，因為h1占據了容器的整個寬度。有沒有其他的解決方法可以達到這個目的？我已經嘗試了所有的方法，從在header標簽的末尾添加一條長長的黑線，但是沒有一種方法有效。要么線在不該在的地方，要么根本沒有線。

所以，在寫這個問題的時候，我已經找到了答案。我修改了公認的答案，在header標記的末尾添加了一條長長的黑線，方法是將& quottop & quot用& quot底部

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