Html 输入虚线边框和笔划长度等于字符的文本

如何使用CSS生成一个输入文本，底框/线条的虚线长度等于每个字符的长度

下面是一个例子：

---

尝试使用

边框底部：1px黑色虚线
虚线
边框样式没有给出确切的效果，因为我们使用了。相反，我们可以通过在输入后面使用绝对定位的伪元素来创建虚线边框，并通过
字母间距
属性指定笔划之间的间距


input[type=“text”]{
-webkit外观：无；
-moz外观：无；
外观：无；
边界：0；
大纲：0；
背景：透明；
宽度：12.70em；
字号：1em；
}
.输入包装器，输入[type=“text”]{
字体系列：monospace；
字体大小：粗体；
字母间距：.3em；
}
.输入包装器{
显示：内联块；
位置：相对位置；
溢出：隐藏；
垫底：2米；
字体大小：200%；
}
.输入包装器：在{
内容：“-----------------------------------”；
线高：.3em；
位置：绝对位置；
底部：0；
左：0；
z指数：-1；
}
您还可以为每个字母使用一个跨距，并获得相同的结果（仅使用边框底部，并设置固定的宽度、高度和边距）：


span{
显示：内联块；
边框底部：5px纯黑；
右边距：2px；
宽度：20px；
文本对齐：居中；
高度：30px；
字体系列：Verdana；
字体大小：粗体；
字体大小：24px；
/*如果更改字体大小，请添加底部填充*/
}
H
E
L
L
O
有没有办法让下划线更宽？