HTML中使用纯CSS实现的输入字符带下划线的输入框

    这是一款在每个字符下面都带有下划线的输入框效果，基于纯CSS技术实现。通过使用ch单位和等宽字体（monospace），确保每个字符宽度一致，为1ch。字符间的间距设定为0.5ch，即letter-spacing的值。输入框的宽度根据字符数量与字符加间距总宽度计算得出。此效果移除了输入框的实际边框，利用repeating-linear-gradient创建了仿若每个字符下方都有独立下划线的视觉效果，这些下划线由深灰色线条（表示下划线）和透明部分（表示字符间间距）交替组成。下划线贴合输入框的左侧和底部，并且在水平方向上覆盖整个输入框，高度固定为2px。