html - 如何在 HTML/SVG/CSS 中的文本基线上画一条线

Question

我想在一些文本之后的范围内画一条线。该行应扩展文本的基线。例如:

一些文字______________________(这条线，用下划线创建，太低了)

我的想法:

<span>Some text<svg><line x1=.. y1=.. x2=.. y2=.. /></svg></span>

但是我该如何设置线条的 svg-height 和 y 值？

还有什么建议吗？

Answer 1

这是另一种方法，使用 SVG。

span {
  font-size: 30px;
}

svg.baseline {
  width: 4em;
}

svg.baseline line {
  stroke: red;
  stroke-width: 0.06;
}

<span>
  Some text
  <svg width="1em" height="1em" viewBox="0 0 1 1" preserveAspectRatio="none" class="baseline">
    <line x1="0" y1="0.97" x2="1" y2="0.97" />
  </svg>
</span>

SVG 被视为图像，默认情况下与文本的基线对齐。在 SVG 中，您需要做的就是在 SVG 的最底部以您想要的宽度画一条线。您可以通过更改 CSS 中 SVG 的宽度来设置线条的长度。

这适用于任何字体大小。尝试更改 <span> 的字体大小在 CSS 中。目前设置为 30px。