The text-decoration-skip-ink property controls how underlines and other decorations render around glyph descenders. Here's how to use it.
Basic Usage#
1/* Skip ink around descenders (default) */
2.skip-auto {
3 text-decoration: underline;
4 text-decoration-skip-ink: auto;
5}
6
7/* Don't skip - underline goes through descenders */
8.skip-none {
9 text-decoration: underline;
10 text-decoration-skip-ink: none;
11}
12
13/* Skip all descenders */
14.skip-all {
15 text-decoration: underline;
16 text-decoration-skip-ink: all;
17}Visual Comparison#
1/* Compare with text that has descenders */
2.example {
3 font-size: 24px;
4}
5
6/* Default - gaps around g, j, p, q, y */
7.auto-skip {
8 text-decoration: underline;
9 text-decoration-skip-ink: auto;
10 /* "Typography" shows gaps around y and p */
11}
12
13/* No gaps - continuous line */
14.no-skip {
15 text-decoration: underline;
16 text-decoration-skip-ink: none;
17 /* "Typography" shows line through y and p */
18}Link Styling#
1/* Clean link underlines */
2a {
3 text-decoration: underline;
4 text-decoration-skip-ink: auto;
5 text-underline-offset: 0.2em;
6 text-decoration-thickness: 2px;
7}
8
9/* Hover effect */
10a:hover {
11 text-decoration-skip-ink: none;
12 text-decoration-color: currentColor;
13}
14
15/* Different styles for different link types */
16.nav-link {
17 text-decoration-skip-ink: auto;
18}
19
20.content-link {
21 text-decoration-skip-ink: all;
22 text-underline-offset: 0.15em;
23}Combined with Other Properties#
1/* Full text-decoration control */
2.styled-underline {
3 text-decoration-line: underline;
4 text-decoration-style: solid;
5 text-decoration-color: #3b82f6;
6 text-decoration-thickness: 2px;
7 text-underline-offset: 4px;
8 text-decoration-skip-ink: auto;
9}
10
11/* Wavy underline */
12.wavy-underline {
13 text-decoration: underline wavy #ef4444;
14 text-decoration-skip-ink: none; /* Wavy looks better continuous */
15}
16
17/* Dotted underline */
18.dotted-underline {
19 text-decoration: underline dotted;
20 text-decoration-skip-ink: auto;
21 text-underline-offset: 3px;
22}
23
24/* Double underline */
25.double-underline {
26 text-decoration: underline double;
27 text-decoration-skip-ink: auto;
28}Typography Considerations#
1/* Different fonts need different settings */
2
3/* Serif fonts - usually better with skip */
4.serif-text {
5 font-family: Georgia, serif;
6 text-decoration: underline;
7 text-decoration-skip-ink: auto;
8}
9
10/* Sans-serif - depends on style */
11.sans-text {
12 font-family: Arial, sans-serif;
13 text-decoration: underline;
14 text-decoration-skip-ink: auto;
15}
16
17/* Monospace - often looks better without skip */
18.mono-text {
19 font-family: monospace;
20 text-decoration: underline;
21 text-decoration-skip-ink: none;
22}
23
24/* Script/cursive fonts - skip recommended */
25.script-text {
26 font-family: cursive;
27 text-decoration: underline;
28 text-decoration-skip-ink: all;
29}Accessibility Considerations#
1/* Ensure underlines are visible */
2a {
3 text-decoration: underline;
4 text-decoration-skip-ink: auto;
5 text-decoration-thickness: max(1px, 0.1em);
6 text-underline-offset: 0.15em;
7}
8
9/* High contrast mode */
10@media (prefers-contrast: high) {
11 a {
12 text-decoration-thickness: 2px;
13 text-decoration-skip-ink: none;
14 }
15}
16
17/* Focus visible */
18a:focus-visible {
19 text-decoration-skip-ink: none;
20 text-decoration-thickness: 3px;
21 outline: 2px solid currentColor;
22 outline-offset: 2px;
23}Strikethrough#
1/* Skip ink also affects strikethrough */
2.strikethrough {
3 text-decoration: line-through;
4 text-decoration-skip-ink: none; /* Usually want continuous */
5}
6
7/* Combined decorations */
8.multi-decoration {
9 text-decoration: underline line-through;
10 text-decoration-skip-ink: auto; /* Affects both */
11}
12
13/* Separate control with multiple elements */
14.underline-skip {
15 text-decoration: underline;
16 text-decoration-skip-ink: auto;
17}
18
19.strike-no-skip {
20 text-decoration: line-through;
21 text-decoration-skip-ink: none;
22}Overline#
1/* Overline usually doesn't need skip */
2.overline {
3 text-decoration: overline;
4 text-decoration-skip-ink: none;
5}
6
7/* Combined underline and overline */
8.framed-text {
9 text-decoration: underline overline;
10 text-decoration-skip-ink: auto;
11 text-underline-offset: 3px;
12}Practical Examples#
1/* Blog post links */
2.article a {
3 color: #2563eb;
4 text-decoration: underline;
5 text-decoration-skip-ink: auto;
6 text-decoration-color: rgba(37, 99, 235, 0.4);
7 text-underline-offset: 2px;
8 transition: text-decoration-color 0.2s;
9}
10
11.article a:hover {
12 text-decoration-color: currentColor;
13}
14
15/* Navigation */
16.nav-item {
17 text-decoration: none;
18}
19
20.nav-item.active {
21 text-decoration: underline;
22 text-decoration-skip-ink: auto;
23 text-decoration-thickness: 3px;
24 text-underline-offset: 6px;
25}
26
27/* Highlighted text */
28.highlight {
29 text-decoration: underline;
30 text-decoration-color: #fbbf24;
31 text-decoration-thickness: 0.4em;
32 text-decoration-skip-ink: none;
33 text-underline-offset: -0.15em;
34}Animation Effects#
1/* Animated underline */
2.animated-link {
3 position: relative;
4 text-decoration: none;
5}
6
7.animated-link::after {
8 content: '';
9 position: absolute;
10 bottom: 0;
11 left: 0;
12 width: 100%;
13 height: 2px;
14 background: currentColor;
15 transform: scaleX(0);
16 transform-origin: right;
17 transition: transform 0.3s ease;
18}
19
20.animated-link:hover::after {
21 transform: scaleX(1);
22 transform-origin: left;
23}
24
25/* Or use text-decoration with transition */
26.fade-underline {
27 text-decoration: underline;
28 text-decoration-color: transparent;
29 text-decoration-skip-ink: auto;
30 transition: text-decoration-color 0.3s;
31}
32
33.fade-underline:hover {
34 text-decoration-color: currentColor;
35}Browser Fallbacks#
1/* Progressive enhancement */
2a {
3 /* Fallback */
4 text-decoration: underline;
5}
6
7@supports (text-decoration-skip-ink: auto) {
8 a {
9 text-decoration-skip-ink: auto;
10 text-underline-offset: 0.2em;
11 text-decoration-thickness: 1px;
12 }
13}
14
15/* Feature detection in CSS */
16.link {
17 text-decoration: underline;
18}
19
20.link {
21 text-decoration-skip-ink: auto; /* Ignored if unsupported */
22}Print Styles#
1/* Print considerations */
2@media print {
3 a {
4 text-decoration: underline;
5 text-decoration-skip-ink: auto;
6 text-decoration-color: black;
7 }
8
9 /* Remove decorative underlines */
10 .decorative-underline {
11 text-decoration: none;
12 }
13}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.