The text-decoration-skip-ink property controls how underlines and other decorations render around glyph descenders. Here's how to use it.
Basic Usage
Loading code block...
Visual Comparison
Loading code block...
Link Styling
Loading code block...
Combined with Other Properties
Loading code block...
Typography Considerations
Loading code block...
Accessibility Considerations
Loading code block...
Strikethrough
Loading code block...
Overline
Loading code block...
Practical Examples
Loading code block...
Animation Effects
Loading code block...
Browser Fallbacks
Loading code block...
Print Styles
Loading code block...
Best Practices
When to Use auto:
✓ Body text links
✓ Long-form content
✓ Serif and script fonts
✓ Accessibility-focused design
When to Use none:
✓ Decorative underlines
✓ Short text/headings
✓ Strikethrough text
✓ Wavy/dotted styles
When to Use all:
✓ Maximum readability
✓ Complex scripts
✓ Small font sizes
✓ High contrast needs
Avoid:
✗ Inconsistent link styles
✗ Too thick underlines
✗ Poor color contrast
✗ Ignoring descenders
Conclusion
The text-decoration-skip-ink property improves underline rendering by creating gaps around descenders like g, j, p, q, and y. Use auto for most text content to improve readability, none for decorative effects or continuous lines, and all for maximum descender clearance. Combine with text-underline-offset and text-decoration-thickness for complete control over underline styling.