在输入文本中仅在字母下划线

Question

我试图使输入如下所示

问题是我无法使这些下划线出现，我不确定是否有任何优雅的解决方案（或不太糟糕）来存档此文件。我已经考虑过设置绝对位置并使其合适，但是我不确定这是否是最佳解决方案。

我知道问题看起来没有那么详细，但是我没有更多信息可提供。

谢谢！

Answer 1

您可以考虑背景，但该值将与字体属性紧密相关。我考虑了一种等宽字体，它将在逻辑上为我们提供预期的结果，因为所有字符都将具有相同的大小：

input {
   padding:10px 5px;
   border:1px solid;
   font-family:monospace;
   width: calc(8*(1ch + 5px));
   font-size:20px;
   letter-spacing:5px;
   background:
    repeating-linear-gradient(to right,blue 0 1ch,transparent 1ch calc(1ch + 5px))
    bottom/100% 2px content-box no-repeat;
}

<input type="text" maxlength="8">