text-decoration-skip

Definition

The text-decoration-skip CSS property is used to control which parts of an element’s text content should be skipped or omitted when applying the text decoration styles, such as underline, overline, or line-through.

Here’s an example of how to use the text-decoration-skip property:

h1 {
  text-decoration: underline;
  text-decoration-skip: ink;
}

In this example, the text-decoration: underline; property is applied to the <h1> heading element to add an underline to the text. The text-decoration-skip property is set to ink, indicating that the underline should skip any ink spill areas or areas where the letterforms extend below the baseline. This prevents the underline from intersecting with descenders or decorative swashes of certain characters.

The text-decoration-skip property accepts different values to define how the text decoration should skip certain areas. Some common values include:

none: No skipping occurs, and the text decoration is applied uniformly across the text content.
spaces: Spaces are skipped, meaning the text decoration is not applied to spaces between words.
auto: The browser decides the areas to skip based on the font metrics and rendering rules.

It’s important to note that the text-decoration-skip property is not widely supported by all browsers, and its usage might have limited compatibility. Therefore, it’s recommended to use it with caution and consider fallback options or alternative techniques if broader browser support is required.

Syntax

a {
  text-decoration-skip: ink;
}

Values

none: draw decorations through descenders.
objects / spaces / ink: skip various elements beneath the line (browser support varies).
box-decoration: skip decorations that cross borders (legacy).

Practical Examples

a {
  text-decoration: underline;
  text-decoration-skip: ink;
}

Skipping ink avoids underlines colliding with descenders for a cleaner look.

HTML

underline ink skip

Code

<div class="flex gap-6 text-lg text-slate-900">
  <a href="#" style="text-decoration: underline;">underline</a>
  <a href="#" style="text-decoration: underline; text-decoration-skip: ink;">ink skip</a>
</div>

Tips & Best Practices

Modern text-decoration-skip-ink property is preferred; browsers treat text-decoration-skip: ink similarly.
Test across browsers—support for skip options varies.

Accessibility & UX Notes

Cleaner underlines improve readability, especially for people with dyslexia.

Browser Support

Support is partial; text-decoration-skip-ink is standard in modern browsers.

text-decoration-skip-ink (modern property).
text-underline-offset to control distance from text.
text-decoration-thickness.