仅在输入文本中加下划线

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">