Text styling
text-decoration-skip-ink
text-decoration-skip-ink sets whether underlines and overlines break where they would cross the glyphs. With the initial value, auto, an underline breaks around descenders such as those of y and p.
Syntax
auto | none | allPreview
Presets
Drag the bottom-right corner to resize
Code
.box {
text-decoration: underline;
text-decoration-skip-ink: none;
}Controls
text-decoration-skip-inknone
About
Three values
auto: the initial value. The line breaks where it would cross a glyph’s shape and a little to either side. Browsers may decide by script which glyphs to skip, and they usually don’t skip CJK characters.none: draws one continuous line, even across glyphs.all: skips every glyph the line crosses, CJK characters included.
Why CJK isn’t skipped
CJK characters fill most of the em box, so with some fonts the underline crosses almost every character, and skipping them leaves only fragments of the line. That’s why auto usually leaves them alone. To keep an underline clear of Japanese or Chinese text, lowering it with text-underline-position: under or text-underline-offset looks better than breaking it.
Watch out
- It only affects underlines and overlines. A
line-throughis always continuous. - The value on the element that draws the line applies to the line across all its text. Setting a different value on a child doesn’t change how the parent’s line breaks. The value is inherited, so lines the child draws itself use the child’s value.
- Chrome and Edge support
allfrom version 148. Firefox and Safari have supported it for longer. - The preview here underlines “Typo” with
text-decoration: underline, so you can see how the line meets the descenders of y and p.