I tried the class you posted but the underlining was not very exact for 3 individual letters, and is kinda inaccurate in general:
So I tried messing with the background-image percentages and background-size properties and I found this worked well enough specifically for 3 letters:
.seats {
font-family: monospace;
font-size: 16px;
white-space: pre;
letter-spacing: 4px;
background-image: linear-gradient(to right, white 0%, white 75%, transparent 75%, transparent 100%, white 100%);
background-size: 14px 1px;
background-repeat: repeat-x;
background-position: bottom;
}
Mainly got this through trial and error but I understand the gist of how you work with it now. This may not work as well when dealing with more than 3 characters, I don’t know if there’s a way to get a 100% accurate character-to-underline match, but for the sake of what I’m doing at the moment this will be fine for now.