Pretty text underline
Provides a nicer alternative to text-decoration: underline
where descenders do not clip the underline.
- Use
text-shadow
to apply 4 values with offsets covering a 4x4px
area. This ensures the underline has a thick shadow that covers the line where descenders clip it. For best results, use a color that matches thebackground
and adjust thepx
values for larger fonts. - Use
background-image
withlinear-gradient()
andcurrentColor
to create a gradient that will act as the actual underline. - Set
background-position
,background-repeat
andbackground-size
to place the gradient in the correct position. - Use the
::selection
pseudo-class selector to ensure the text shadow does not interfere with text selection.
<div class="container"> <p class="pretty-text-underline">Pretty text underline without clipping descenders.</p> </div>
.container { background: #f5f6f9; color: #333; padding: 8px 0; } .pretty-text-underline { display: inline; text-shadow: 1px 1px #f5f6f9, -1px 1px #f5f6f9, -1px -1px #f5f6f9, 1px -1px #f5f6f9; background-image: linear-gradient(90deg, currentColor 100%, transparent 100%); background-position: bottom; background-repeat: no-repeat; background-size: 100% 1px; } .pretty-text-underline::selection { background-color: rgba(0, 150, 255, 0.3); text-shadow: none; }