X

Headline

This is an important message requiring you to make a choice if you're based in the EU.

CSS text-decoration-skip-ink Property

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

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 Value auto
Applies to All elements.
Inherited Yes.
Animatable No.
Version CSS4
DOM Syntax object.style.textDecorationSkipInk = "none";

Syntax

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

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>

Values

Value Description
auto Underlines and overlines are only drawn where they do not touch or closely approach a glyph. This is the default value of this property.
none Underlines and overlines are drawn for all text content including parts that cross over glyph descenders and ascenders.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.

Browser support

64.0+ x x x 50.0+

Practice Your Knowledge

The text-decoration-skip-ink property specifies



Do you find this helpful?

Related articles