Web/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.); [[File:../../../../../media.prod.mdn.mozit.cloud/attachments/2016/07/02/13466/3743cdfc97e0615e692d548cbe50d136/decoration-skip-edges.png|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

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

Browser compatibility

Update compatibility data on GitHub

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

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.