text-decoration-skip CSS property
Deprecated: This feature is no longer recommended. Though some browsers might still support it, it may have already been removed from the relevant web standards, may be in the process of being dropped, or may only be kept for compatibility purposes. Avoid using it, and update existing code if possible; see the compatibility table at the bottom of this page to guide your decision. Be aware that this feature may cease to work at any time.
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.
Syntax
/* 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: revert;
text-decoration-skip: revert-layer;
text-decoration-skip: unset;
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-spacingorword-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.)
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
text-decoration-skip =
none |
auto
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 |
|---|
| CSS Text Decoration Module Level 4 # text-decoration-skipping |
Browser compatibility
| desktop | mobile | |||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|
text-decoration-skip
|
|
|
|
|
|
|
|
|
|
|
|
|
auto
|
|
|
|
|
|
|
|
|
|
|
|
|
none
|
|
|
|
|
|
|
|
|
|
|
|
|
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
- No support
- No support
- Deprecated. Not for use in new websites.
- Requires a vendor prefix or different name for use.
- Has more compatibility info.