text-decoration-skip-ink

The text-decoration-skip-ink CSS property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.

Syntax

/* Single keyword */
text-decoration-skip-ink: none;
text-decoration-skip-ink: auto;

/* Global keywords */
text-decoration-skip: inherit;
text-decoration-skip: initial;
text-decoration-skip: unset;

Values

none

Underlines and overlines are drawn across the full length of the text content, including parts that cross over glyph descenders and ascenders.

auto

The default — underlines and overlines are only drawn where they do not touch or closely approach a glyph. I.e. they are interrupted where they would otherwise cross over a glyph.

Formal Syntax

auto | none

Example

HTML content

<p>You should go and grab a cup of coffee.</p>

CSS content

p {
  margin: 0;
  font-size: 2em;
  text-decoration: underline blue;
  text-decoration-skip-ink: auto;
}

Result

Specifications

Browser CompatibilityUpdate compatibility data on GitHub