The text-decoration-skip-ink
CSS property specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.
/* Single keyword */ text-decoration-skip-ink: none; text-decoration-skip-ink: auto; /* Global keywords */ text-decoration-skip: inherit; text-decoration-skip: initial; text-decoration-skip: unset;
Initial value | auto |
---|---|
Applies to | all elements |
Inherited | yes |
Media | visual |
Computed value | as specified |
Animation type | discrete |
Canonical order | order of appearance in the formal grammar of the values |
Syntax
Values
none
- The default — underlines and overlines are drawn across the full length of the text content, including parts that cross over glyph descenders and ascenders.
auto
- Underlines and overlines are only drawn where they do not touch or closely approach a glyph. I.e. they are interrupted where they would otherwise cross over a glyph.
Formal Syntax
auto | none
Example
HTML content
<p>You should go and grab a cup of coffee.</p>
CSS content
p { margin: 0; font-size: 2em; text-decoration: underline blue; text-decoration-skip-ink: auto; }
Result
Specifications
Specification | Status | Comment |
---|---|---|
CSS Text Decoration Module Level 4 The definition of 'text-decoration-skip-ink' in that specification. |
Editor's Draft | Initial definition |
Browser Compatibility
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.
Feature | Chrome | Edge | Firefox | Internet Explorer | Opera | Safari |
---|---|---|---|---|---|---|
Basic support | 64 | No | No | No | 50 | No |
Feature | Android webview | Chrome for Android | Edge mobile | Firefox for Android | IE mobile | Opera Android | iOS Safari |
---|---|---|---|---|---|---|---|
Basic support | 64 | 64 | No | No | No | 50 | No |
Document Tags and Contributors
Tags:
Contributors to this page:
fscholz,
chrisdavidmills
Last updated by:
fscholz,