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

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

auto

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 Compatibility