在多行文字下划线+下划线为全角+自适应

Question

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

文本保持左对齐（不合理）。

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

线高以ems为单位。在较小的断点处，字体大小以vw为单位。

我尝试创建一个重复的背景图像线性渐变，但是由于行高是以ems为单位，并且我只希望下划线为1px高，因此浏览器正在计算下划线的高度小于1像素（请参见第二幅图像，该像素的边界顶部与线性渐变相比为1像素-二者均为rgb（255,255,255）。因此，下划线看起来非常模糊。在较小的视口中很难看到。

有什么建议吗？

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&nbsp;posh stuff</h1>
</div>

https://jsfiddle.net/4exgf7zs/1/

可能的解决方案 通过在线性渐变上添加第三个光阑，它现在似乎可以正常工作。并将线增加到2px。虽然我不明白为什么？

background-image: linear-gradient(to bottom, black calc(1.1em - 2px), white calc(1.1em - 2px), white 1.1em);

Answer 1

虽然我无法确切解释为什么会发生此问题，但可以在整个元素上使用repeating-linear-gradient而不是使用平铺的linear-gradient来避免。

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&nbsp;posh stuff</h1>
</div>

此解决方案似乎引起了一些问题，即最后一行的下方可能会出现一行，也可能不会出现，您可能还想摆弄一些其他内容。