Css 在文本的几行下划线+；下划线为全宽+；反应敏捷的

我有一个标题。在桌面屏幕上，标题是三行，在电话屏幕上是六行

文本左对齐（未对齐）

我希望所有文本行都带有“下划线”，并且行的宽度为包含div的宽度的100%（而不是文本的宽度）

线路高度以ems为单位测量。在较小的断点处，字体大小以vw表示

我尝试创建了一个重复的背景图像线性渐变，但由于线条高度是在ems中测量的，我只希望下划线的高度为1px，浏览器正在计算下划线的高度小于1px（参见第二张显示边框顶部为1px的图像，与线性渐变相比-两者都是rgb（255255）。因此下划线看起来很模糊。在较小的视口中很难看到

有什么建议吗

html{
字体大小：62.5%；
}
.英雄形象{
颜色：rgb（255、255、255）；
背景色：rgb（0,0,0）；
垫底：8rem；
最大宽度：111.6雷姆；
}
.hero_图像h1{
字号：12rem；
线高：1.1米；
背景图像：线性渐变（到底部，rgb（0,0,0）计算（1.1em-1px），rgb（0,220,200）1.1em）；
背景重复：重复-y；
背景尺寸：100%1.1em；
}
@媒体屏幕和屏幕（最大宽度：660像素）{
html{
字体大小：56%；
}
.hero_图像h1{
字体大小：10vw；
}
}

XYZXYZ
高级设计机构

虽然我无法确切解释出现此问题的原因，但可以通过在整个元素上使用

重复线性渐变来避免，而不是使用平铺的
线性渐变


html{
字体大小：62.5%；
}
.英雄形象{
颜色：rgb（255、255、255）；
背景色：rgb（0,0,0）；
垫底：8rem；
最大宽度：111.6雷姆；
}
.hero_图像h1{
字号：12rem；
线高：1.1米；
背景图像：重复线性渐变(
归根结底，
rgb（0,0,0），
rgb（0,0,0）计算值（1.1em-1px），
rgb（022200）计算值（1.1em-1px），
rgb（0，220，200）1.1米
);
}
@媒体屏幕和屏幕（最大宽度：660像素）{
html{
字体大小：56%；
}
.hero_图像h1{
字体大小：10vw；
}
}

XYZXYZ
高级设计机构
subpixel rendring…将其设置为2px是否合适？我已经尝试过了，但它不起作用。所以我尝试了10px来看看会发生什么，我可以看到从黑色到白色的渐变。因此，增加高度没有帮助。这是怎么回事：需要第三个颜色停止来避免褪色我更喜欢这个解决方案。它的CSS更少，感觉更整洁。我lso注意到最后一行有时显示，有时不显示。我在h1的底部添加了一些填充，这似乎可以修复它。谢谢