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.

/* 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;

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

Initial valueobjects
Applies toall elements
Inheritedyes
Mediavisual
Computed valueas specified
Animation typediscrete
Canonical orderorder of appearance in the formal grammar of the values

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 Syntax

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

Example

HTML

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

CSS

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

Result

Specifications

Specification Status Comment
CSS Text Decoration Module Level 4
The definition of 'text-decoration-skip' in that specification.
Working Draft Initial definition

Browser Compatibility

Update compatibility data on GitHub
DesktopMobile
ChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidiOS SafariSamsung Internet
Basic support
Experimental
Chrome No support 57 — 64
Notes
No support 57 — 64
Notes
Notes Only supports the deprecated ink value.
Edge No support NoFirefox No support NoIE No support NoOpera No support 44 — 50
Notes
No support 44 — 50
Notes
Notes Only supports the deprecated ink value.
Safari Full support 8
Prefixed Notes
Full support 8
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes Only supports the none and skip values; all other values behave like those two values.
WebView Android No support 57 — 64
Notes
No support 57 — 64
Notes
Notes Only supports the deprecated ink value.
Chrome Android No support 57 — 64
Notes
No support 57 — 64
Notes
Notes Only supports the deprecated ink value.
Edge Mobile No support NoFirefox Android No support NoOpera Android No support 44 — 50
Notes
No support 44 — 50
Notes
Notes Only supports the deprecated ink value.
Safari iOS Full support 8
Prefixed Notes
Full support 8
Prefixed Notes
Prefixed Requires the vendor prefix: -webkit-
Notes Only supports the none and skip values; all other values behave like those two values.
Samsung Internet Android Full support 7.0

Legend

Full support  
Full support
No support  
No support
Experimental. Expect behavior to change in the future.
Experimental. Expect behavior to change in the future.
See implementation notes.
See implementation notes.
Requires a vendor prefix or different name for use.
Requires a vendor prefix or different name for use.

Document Tags and Contributors

Last updated by: ddbeck,