W3docs
en
Log in

CSS text-decoration-skip-ink Property

Use the CSS text-decoration-skip-ink property to specify how underlines and overlines should be drawn. See property values and try examples.

The text-decoration-skip-ink property specifies how underlines and overlines are drawn when they cross over a glyph.

Info

When the text-decoration-line property is set to "underline" and "overline" the text-decoration-skip-ink property has an effect. "Line-through" value is unaffected.

Initial Valueauto
Applies toAll elements.
InheritedYes.
AnimatableNo.
VersionCSS Text Decoration Module Level 4
DOM Syntaxobject.style.textDecorationSkipInk = "none";

Syntax

CSS text-decoration-skip-ink values

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

Example of the text-decoration-skip-ink property:

CSS text-decoration-skip-ink code example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      .ex1 {
        margin: 0;
        font-size: 2em;
        text-decoration: underline #1c87c9;
        text-decoration-skip-ink: none;
      }
      .ex2 {
        margin: 0;
        font-size: 2em;
        text-decoration: underline #1c87c9;
        text-decoration-skip-ink: auto;
      }
    </style>
  </head>
  <body>
    <h2>
        Text-decoration-skip-ink property example
    </h2>
    <h3>
        Text-decoration-skip-ink: none;
    </h3>
    <p class="ex1">
      Lorem ipsum is simply dummy text
    </p>
    <h3>
        Text-decoration-skip-ink:auto;
    </h3>
    <p class="ex2">
      Lorem ipsum is simply dummy text
    </p>
  </body>
</html>
Try it Yourself »

Result

CSS text-decoration-skip-ink values list

Values

ValueDescription
autoUnderlines and overlines are only drawn where they do not touch or closely approach a glyph. This is the default value of this property.
noneUnderlines and overlines are drawn for all text content including parts that cross over glyph descenders and ascenders.
initialSets the property to its default value.
inheritInherits the property from its parent element.

Practice

Practice

What does the CSS property 'text-decoration-skip-ink' do?