CSS text-decoration-skip Property

The text-decoration-skip property specifies the parts of an element’s content the text decoration should skip over.

It controls all text decoration lines drawn by the element and by its ancestors.

The "ink" value was moved to the text-decoration-skip-ink property.

Initial Value objects
Applies to All elements.
Inherited Yes.
Animatable No.
Version CSS3
DOM Syntax object.style.textDecorationSkip = "spaces";

Syntax

text-decoration-skip: none | objects | spaces | leading spaces | trailing spaces | edges | box-decoration | initial | inherit;

Example

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      p {
      margin: 1;
      color: #ccc;
      font-size: 2em;
      text-decoration: underline;
      text-decoration-skip: edges;
      }
    </style>
  </head>
  <body>
    <h2>Text-decoration-style property example</h2>
    <p><em>Lorem,</em> <em>ipsum is simply dummy text</em></p>
  </body>
</html>

Values

Value Description
none No skip will appear. Thus, text decoration is drawn for all text content.
objects The entire margin box of the element is skipped if it is an image or inline-block.
spaces All spacing is skipped.
leading spaces Leading spaces are skipped (typographic character units, word separators, letter-spacing or word-spacing).
trailing spaces Trailing spaces are skipped (typographic character units, word separators, letter-spacing or word-spacing).
edges The start and end of the text decoration is inset slightly from the content edge of the decorating box.
box-decoration The box’s margin, border, and padding areas are skipped.
ink Glyphs or descenders are skipped.
initial Sets the property to its default value.
inherit Inherits the property from its parent element.




Related articles