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

我想在一段文字后在一个跨度内画一条线。该行应延伸文本的基线。例如：

一些文字（用下划线创建的此行太低）

我的想法是：

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

一些文本

但是如何设置行的svg高度和y值

还有其他建议吗

问候

---

Christian

如果是单行，flex可以提供简单的帮助：

设置flex:1；添加到svg并删除伪规则

span{
显示器：flex；
背景：黄色；
}
span+span{
字号：3em；
}
跨度：之后{
内容：''；
弹性：1；
边框底部：0.1米实心；
边缘底部：0.25em；
}

一些文本
一些文本

如果是单行，flex可以提供简单的帮助：

设置flex:1；添加到svg并删除伪规则

span{
显示器：flex；
背景：黄色；
}
span+span{
字号：3em；
}
跨度：之后{
内容：''；
弹性：1；
边框底部：0.1米实心；
边缘底部：0.25em；
}

一些文本
一些文本

这里有另一种方法，使用SVG

span{
字体大小：30px；
}
svg.baseline{
宽度：4em；
}
基线{
笔画：红色；
笔划宽度：0.06；
}

一些文本

这里有另一种方法，使用SVG

span{
字体大小：30px；
}
svg.baseline{
宽度：4em；
}
基线{
笔画：红色；
笔划宽度：0.06；
}

一些文本

基于上述解决方案，这里是另一个解决方案：

.baseline{
显示器：flex；
调整项目：基线；
空白：nowrap；
}
.基线svg{
宽度：100%；
高度：1吨；
笔画：黑色；
笔画宽度：1pt；
}

你好，我的基线

基于上述解决方案，这里是另一个解决方案：

.baseline{
显示器：flex；
调整项目：基线；
空白：nowrap；
}
.基线svg{
宽度：100%；
高度：1吨；
笔画：黑色；
笔画宽度：1pt；
}

你好，我的基线

谢谢。我可以看到，边缘底部或底部是0.25em。此值对任何字体都有效吗？@C.Hoffmann您可以尝试几种字体，但对于大多数字体，这应该是正确的。现在，我不知道什么是花哨的字体。如果不确定，可以使用具有设定宽度、相等负边距和垂直对齐：基线的内联块容器。第三个片段补充说谢谢你。我可以看到，边缘底部或底部是0.25em。此值对任何字体都有效吗？@C.Hoffmann您可以尝试几种字体，但对于大多数字体，这应该是正确的。现在，我不知道什么是花哨的字体。如果不确定，可以使用具有设定宽度、相等负边距和垂直对齐：基线的内联块容器。添加了第三个片段