text-decoration-skip-ink

text-decoration-skip-ink controls whether underlines and overlines interrupt where they would collide with glyph ink. It concerns ascenders and descenders, not the open counters inside letters such as o.

Compare a continuous underline with auto skipping

The words include g, y, and p descenders. None draws continuously; auto may break the line around those glyphs. Exact interruptions depend on the font and browser.

<p class="continuous">gyp typography</p>
<p class="auto">gyp typography</p>

p {
  font:
    2rem Georgia,
    serif;
  text-decoration: underline 2px #2563eb;
}
.continuous {
  text-decoration-skip-ink: none;
}
.auto {
  text-decoration-skip-ink: auto;
}

Let a readable link retain browser skipping

Auto preserves the browser’s glyph-avoidance behavior. A modest offset gives the underline more room, which can reduce the visible need for interruptions.

<p>Try the <a href="#details">practice details</a>.</p>
<section id="details">
  <h2>Practice details</h2>
  <p>This destination is inside the example.</p>
</section>

a {
  color: #1d4ed8;
  text-decoration: underline;
  text-decoration-skip-ink: auto;
  text-underline-offset: 0.15em;
}
a:focus-visible {
  outline: 3px solid #172554;
  outline-offset: 3px;
}

Values and defaults

The initial value is auto and the property is inherited. Auto permits the browser to interrupt around glyphs; none keeps lines continuous. All requires avoidance wherever a collision would occur and has a separate compatibility row, especially relevant to some CJK fonts. It is not part of the text-decoration shorthand.

Common mistakes

Setting auto does not guarantee identical results across engines. A line placed well below the glyphs may show no difference between none and auto. This does not control line-through interruption or change the text’s meaning. The older text-decoration-skip topic is not an interchangeable portable property.

Learn text-underline-offset, text-underline-position, and text-decoration.

Sources and browser support

MDN: text-decoration-skip-ink describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.