W3cubDocs

/CSS

text-decoration-skip

The text-decoration-skip CSS property sets what parts of an element’s content any text decoration affecting the element must skip over. It controls all text decoration lines drawn by the element and also any text decoration lines drawn by its ancestors.

Note: Most other browsers are converging on supporting the simpler text-decoration-skip-ink property.

/* Keyword values */
text-decoration-skip: none;
text-decoration-skip: objects;
text-decoration-skip: spaces;
text-decoration-skip: edges;
text-decoration-skip: box-decoration;

/* Multiple keywords */
text-decoration-skip: objects spaces;
text-decoration-skip: leading-spaces trailing-spaces;
text-decoration-skip: objects edges box-decoration;

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

Syntax

Values

none
Nothing is skipped. Thus, text decoration is drawn for all text content and across atomic inline-level boxes.
objects
The entire margin box of the element is skipped if it is an atomic inline such as an image or inline-block.
spaces
All spacing is skipped: all Unicode white space characters and all word separators, plus any adjacent letter-spacing or word-spacing.
leading-spaces
The same as spaces, except that only leading spaces are skipped.
trailing-spaces
The same as spaces, except that only trailing spaces are skipped.
edges
The start and end of the text decoration is inset slightly (e.g., by half of the line thickness) from the content edge of the decorating box. Thus, adjacent elements receive separate underlines. (This is important in Chinese, where underlining is a form of punctuation.)
An example of "text-decoration-skip: edges;".
box-decoration
The text decoration is skipped over the box's margin, border, and padding areas. This only has an effect on decorations imposed by an ancestor; a decorating box never draws over its own box decoration.

Formal definition

Initial value objects
Applies to all elements
Inherited yes
Computed value as specified
Animation type discrete

Formal syntax

none | [ objects || [ spaces | [ leading-spaces || trailing-spaces ] ] || edges || box-decoration ]

Examples

Skipping edges

HTML

<p>Hey, grab a cup of <em>coffee!</em></p>

CSS

p {
  margin: 0;
  font-size: 3em;
  text-decoration: underline;
  text-decoration-skip: edges;
}

Result

Specifications

Browser compatibilityUpdate compatibility data on GitHub

Desktop
Chrome Edge Firefox Internet Explorer Opera Safari
text-decoration-skip 57 — 64
57 — 64
Only supports the deprecated ink value.
No No No 44 — 50
44 — 50
Only supports the deprecated ink value.
12.1
12.1
Only supports the none and skip values; all other values behave like those two values.
8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Only supports the none and skip values; all other values behave like those two values.
Mobile
Android webview Chrome for Android Firefox for Android Opera for Android Safari on iOS Samsung Internet
text-decoration-skip 57 — 64
57 — 64
Only supports the deprecated ink value.
57 — 64
57 — 64
Only supports the deprecated ink value.
No 43 — 46
43 — 46
Only supports the deprecated ink value.
12.2
12.2
Only supports the none and skip values; all other values behave like those two values.
8
Prefixed
Prefixed Implemented with the vendor prefix: -webkit-
Only supports the none and skip values; all other values behave like those two values.
7.0 — 9.0
7.0 — 9.0
Only supports the deprecated ink value.

See also

© 2005–2020 Mozilla and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-skip