Custom text underlines
text-decoration: underline CSS property provides insufficient control over the underline styling and position. While we wait for the CSS Text Decoration Module specification to become standard, we must rely on custom implementations.
My favorite approach is to use a
linear-gradient to create an underline:
background-image: linear-gradient(gray, gray); background-size: 100% 1px; background-position: left bottom; background-repeat: no-repeat;
Position the underline by changing the vertical value of
background-position: left 1.05em;
You'll notice that the underline overlaps the descenders of the text. By adding a
text-shadow with a small offset to the right and left with the color of the background, you can hide the underline around descenders.
text-shadow: 0.1em 0 var(--background), -0.1em 0 var(--background);
Remember to set
text-shadow: none in your
Change the height of the background to increase the underline weight:
background-size: 100% 0.25em;
By using a
repeating-linear-gradient and leaving half the gradient transparent, you can customize a dashed underline:
background-image: repeating-linear-gradient( to right, var(--gray) 0%, var(--gray) 50%, transparent 50%, transparent 100% ); background-size: 1ch 1px;
Change the horizontal value of
background-size to modify the dash width:
background-size: 5ch 1px;
ch unit is equal to the width of the "0" glyph in the current font, which can be useful for natural alignment.
Lastly, this approach also supports multi-line text:
what you do is what you become.
Thanks to Franco for reminding me about this technique!