Underline two letters separately

Question

Is there a way to have non-continuous underline? I want the underline stop and restart (and see that visually) where I closed and reopened the tags..

Click to copy

W. Raven, “al-Wa<u>sh</u><u>sh</u>aʾ”

Answer 1

The simplest option would be to style the underlines to have a small amount of padding on their right.

Click to copy

u { padding-right: 2px; }

Click to copy

W. Raven, “al-Wa<u>sh</u><u>sh</u>aʾ”

Alternatively, if you want to be smarter with it and only apply it to two consecutive underlines. This finds any underline that directly follows another, and adds padding to it's left.

Click to copy

u + u{ 
  padding-left: 2px;
}

Click to copy

W. Raven, “al-Wa<u>sh</u><u>sh</u>aʾ”