The text-decoration-skip property specifies where a text underline, overline, or strike-through should break. This improves legibility of decorated text and corrects punctuation grammar for some languages.
Here’s one example:
a {
text-decoration-skip: ink;
}Heads up! The ink value has been changed to an entirely new property, text-decoration-skip-ink: auto;.
If your browser supports this property then you’ll notice here that the descenders of each character (like “y” and “p”) have little white spaces around the border:
If your browser doesn’t support this feature then this is what you ought to expect from the property in a supporting browser:
objects: the default. Decoration line skips inline objects, like images or inline-block elements.none: decoration line crosses everything, including inline objects that would normally be skipped.spaces: decoration line skips spaces, word-separator characters, and any spaces set with letter-spacing or word-spacing.ink: decoration line skip glyphs or descenders.edges: decoration line starts slightly after the content’s starting edge and ends slightly before the content’s ending edge. This property was designed to keep two side-by-side underlined elements from looking like they’re sharing a single underline. This is useful for text in the Chinese language, which uses underlining for punctuation.box-decoration: decoration line skips over inherited margin, border, and padding.Update: it looks like the trailing-spaces value has now been deprecated, since it can no longer be found in the spec.
Since this property is not supported by any browser yet there’s no demo, but here’s an example of how each of the values could look once text-decoration-skip is implemented.
text-decoration-skip in OSX and iOSIn late 2014, Apple made a change to text-decoration in Safari and iOS browsers that mimics how text-decoration-skip: ink; should work. Though none of the text-decoration-skip values are officially implemented yet, you can disable this default behavior with -webkit-text-decoration-skip: none;.
text-decoration-skip at MSDN.trailing-spaces as a value from the W3C mailing list..element { text-decoration: underline; }
.element { text-decoration-color: orange; }
.element { text-decoration-line: underline; }
.element {text-decoration-skip-ink: none; }
.element { text-decoration-style: wavy; }
.element { text-decoration-thickness: 2px; }
I found a browser to add to the support table: Netscape 3!
NO BROWSER SUPPORT!!!! ARGHHHHHH what is the point of it then?
But it does have browser support. And if it a browser doesn’t support it… then nbd it’s purely a visual enhancement.
Looks like safari now supports it. No prefix.
Oh sorry. It doesn’t. Still default.
Support for
text-decoration-skipwith valuesobjects,inkjust landed in Chromium’s master branch:https://bugs.chromium.org/p/chromium/issues/detail?id=649700
Worth adding a Codepen to demonstrate this, so users can view this page in Canary (once it lands soon) to see it in action?
And it landed in Chrom{e|ium} 57! If you can’t make it work, make sure you go to
chrome://flags/#enable-experimental-web-platform-featuresand switch that preference on.