Create underline after last line of text to fill white space - html

Question

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: "";
}

Answer 1

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.

Answer 2

Building on what you have already, this snippet puts the text within a span element. This enables a white padding which can overwrite that part of the red line which is under the actual text.
h1 {
font-family: "doesntMatter";
font-style: bold;
font-size: 2rem;
text-align: left;
position: relative;
}
h1>span::after {
display: inline-block;
position: absolute;
border-bottom: 10px solid red;
width: 100%;
left: 0;
margin-top: -11px;
content: "X";
color: transparent;
z-index: -1;
}
h1>span {
background: white;
padding-bottom: 11px;
}
<h1><span>You're the painter, we just want to see you paint.</span></h1>
Note - it's a little bit hacky, including positioning 1px different from the height of the line. This is because on modern screens which use more than one screen pixel for a CSS pixel the system can 'leave behind' traces of color when it is positioning (e.g. a screen pixel - not a whole CSS pixel).