Add a line from the end of the title text to the end of the container

Question

I use this CSS to draw a line from the end of the title text to the end of the container:

h1 {
  display: flex;
}

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

This works well until the title text is longer than one line, because then the h1 takes up the entire width of the container. Are there any other solutions to achieve this? I've tried everything to add a long black line at the end of the title tag but nothing works. Either the line is somewhere it shouldn't be, or there is no line at all.

Answer 1

So, in the process of writing this question I have found the solution. I modified to add a long black line at the end of the accepted answer title tag, by replacing "top" with "bottom"

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