Underline several lines of text + underline to be full width + responsive - css

Question

I have a heading. On a desktop screen the heading is three lines, on a phone screen it is six lines.
The text is left aligned (not justified).
I want all lines of text to be 'underlined' and the line to be 100% of the width of the containing div (not the width of the text).
The line height is measured in ems. And at smaller break-points the font size is measured in vw.
I've tried created a repeating background-image linear-gradient, but because the line-height is measured in ems and I only want the underline to be 1px heigh, browsers are calculating the height of the underline to be less than 1px (see second image showing a border-top of 1px compared to the linear-gradient - both are rgb(255,255,255). Hence the underlines look very faint. And at smaller viewports are very hard to see.
Any suggestions?
html {
font-size: 62.5%;
}
.hero_image {
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
padding-bottom: 8rem;
max-width: 111.6rem;
}
.hero_image h1 {
font-size: 12rem;
line-height: 1.1em;
background-image: linear-gradient(to bottom, rgb(0, 0, 0) calc(1.1em - 1px), rgb(0, 220, 200) 1.1em);
background-repeat: repeat-y;
background-size: 100% 1.1em;
}
#media screen and (max-width:660px) {
html {
font-size: 56%;
}
.hero_image h1 {
font-size: 10vw;
}
}
<div class="hero_image">
<h1>XYZXYZ <br>fancy design agency for posh stuff</h1>
</div>
https://jsfiddle.net/4exgf7zs/1/
POSSIBLE SOLUTION
By adding in a third stop on the linear gradient it now seems to work. And increasing the line to 2px. Although I don't understand why?
background-image: linear-gradient(to bottom, black calc(1.1em - 2px), white calc(1.1em - 2px), white 1.1em);

Answer 1

While I couldn't exactly explain why this issue occurs, it can be avoided using repeating-linear-gradient over the whole element instead of a linear-gradient which gets tiled.
html {
font-size: 62.5%;
}
.hero_image {
color: rgb(255, 255, 255);
background-color: rgb(0, 0, 0);
padding-bottom: 8rem;
max-width: 111.6rem;
}
.hero_image h1 {
font-size: 12rem;
line-height: 1.1em;
background-image: repeating-linear-gradient(
to bottom,
rgb(0, 0, 0),
rgb(0, 0, 0) calc(1.1em - 1px),
rgb(0, 220, 200) calc(1.1em - 1px),
rgb(0, 220, 200) 1.1em
);
}
#media screen and (max-width:660px) {
html {
font-size: 56%;
}
.hero_image h1 {
font-size: 10vw;
}
}
<div class="hero_image">
<h1>XYZXYZ <br>fancy design agency for posh stuff</h1>
</div>
This solution seems to be causing some issues where a line may or may not appear below the last line, you might want to fiddle some more with it.