Underlining just letters inside input text

Question

I was trying to make an input look like the following

The problem is that I am unable to make those underlining appear, I am not sure if theres any elegant solution (or not too bad) to archive this. I already thought about setting absolute positions and make it fit, but I am not sure if it's the best solution.

I know that the question looks not so detailed but I don't have much more info to provide.

Thanks!

Answer 1

You can consider background but the value will be closely related to the font properties. I considered a monospace font which will logically give us the intended result since all the character will have the same size:

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