Create underline after last line of text to fill white space

Issue

I'm having trouble with a SCSS/CSS styling idea, I want to fill the space before or after the last line of a heading with a solid line. The last line of text does not have a set width (it varies depending on screen size) I'm open to any suggestions.

Here's what I want to achieve when the text is aligned right or left.

|Here is some text on screen|     |Here is some text on screen|
|very cool -----------------|  or |----------------- very cool|
|                           |     |                           |
|                           |     |                           |

EDIT Code added for clarity:

HTML

<h1>You're the painter, we just want to see you paint.</h1>

CSS (that is how far I've got)

h1{
  font-family: "doesntMatter";
  font-style: bold;
  font-size: 2rem;
  text-align: left;
}

h1::after{
  display: inline-block;
  line-height: 0;
  position: relative;
  bottom: 2.5rem;
  border-bottom: 10px solid red;
  width: 100%;
  content: "";
}

Solution

I found a solution to my problem, if you take this code here and run it, the last line will be struck through.

.container {
  width: 100%;
  padding-inline: 2rem;
}

.text {
  font-style: bold;
  font-size: 2.5rem;
  line-height: 2.5rem;
  position: relative;
  overflow-x:hidden;
}

.text::after {
  position: absolute;
  left:0;
  bottom: 0.9rem;
  width: 100%;
  border-bottom: 0.4rem solid #000;
  content: "";
}

<section class="container">
      <h1 class="text">You're the painter, we are just the paint, brushes and canvas</h1>
    </section>

But if you remove left:0; from the text::after styling, it magically jumps over to fill the blank space at the end.

I added a margin-left: 1rem to give the things some breathing room but yea I really don't know what's going on.

I don't know how it works but it just kind of does, if the .text{} element has overflow-x: hidden applied to it then the effect will cutoff at the width of the header.

.container {
  width: 100%;
  padding-inline: 2rem;
}

.text {
  font-style: bold;
  font-size: 2.5rem;
  line-height: 2.5rem;
  position: relative;
  overflow-x: hidden;
}

.text::after {
  position: absolute;
  bottom: 0.9rem;
  width: 100%;
  margin-left: 1rem;
  border-bottom: 0.4rem solid #000;
  content: "";
}

<section class="container">
  <h1 class="text">You're the painter, we are just the paint, brushes and canvas</h1>
</section>

That is one way to do the effect, if you want the line to spill off the page, you apply overflow-x: hidden to the .container{} element and remove if from the .text{}... since my container is 100% width the line goes off the page and works as intended.

.container {
  width: 100%;
  padding-inline: 2rem;
  overflow-x: hidden;
}

.text {
  font-style: bold;
  font-size: 2.5rem;
  line-height: 2.5rem;
  position: relative;

}

.text::after {
  position: absolute;
  bottom: 0.9rem;
  width: 100%;
  margin-left: 1rem;
  border-bottom: 0.4rem solid #000;
  content: "";
}

<section class="container">
  <h1 class="text">You're the painter, we are just the paint, brushes and canvas</h1>
</section>

The line responds to any changes in the width of the last line. There's a few edge cases that I'm going to have to look into like if the last line of text practically fills the entire width of the header, then there's just a little nub at the end.

But it's been fixed! I hope this helps anyone in the future that couldn't figure out the right combination of words to google to find a solution.

Answered By - Ben Hammond