text-decoration-skip-ink | CSS-Tricks

text-decoration-skip-ink is a property that controls the behavior of underline and overline (but not line-through) when the line passes through part of a character/glyph. This gives you fine-tuned control over how underlines or overlines interact with the characters that extend above the top or hang below the bottom of a line.

Previously this was handled via the text-decoration-skip: ink; property/value combination, but after discussions about how to handle the problem of cascading styles unintentionally overwriting lower-priority styles (due to the number of options available to text-decoration-skip), the individual properties will be broken out into new properties similar to text-decoration-skip-ink. For more context and examples for why this was changed, see this GitHub discussion and the CSS Working Group minutes discussing the properties.

By default, browsers will “skip” areas where the “ink” of a character crosses an underline, like so:

Text with underline not cutting through characters

You can change this behavior to force the underline/overline to go through the character by setting text-decoration-skip-ink to none.

.line-of-text-thats-already-underlined {
  text-decoration-skip-ink: none;
}

This results in the line cutting right through the characters:

Text with underline cutting through characters

Syntax

text-decoration-skip-ink: auto | none;

Values

text-decoration-skip-ink accepts the following values:

auto is the default value and will “skip” underlines/overlines when passing through a character.
none will cut that underline/overline right through your dangling y’s and tall t’s.