Add a line from end of header text to end of container

Question

I'm using this CSS to draw a line from the end of a header 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 pretty well until the header text is longer than one line, because then the h1 takes the whole width of the container. Is there any other solution to achieve this? I already tried all the methods from Add a long black line at the end of a header tag but nothing works. Either the line is where it should not be or there is no line at all.

If you found the answer and it is a variation of the one you posted, why not add [mcve] to the existing answer? — mplungjan, May 16 '23 at 11:15
"*...but nothing works* - can you clearly explain how those solutions failed? — David Thomas, May 16 '23 at 11:16

score -1 · Answer 1 · answered May 16 '23 at 11:10

So, during writing this question I already found out the solution. I modified the accepted answer of Add a long black line at the end of a header tag by exchanging the "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;
}

Add a line from end of header text to end of container

1 Answers1