Text Decoration
Some interesting additions to the ancient text-decoration property along with a logical use of ex units which measure the height of an x character.
1text-decoration: underline; /* also overline, none and line-through */
2text-decoration-thickness: 2ex;
3text-decoration-color: #c4e4fb;
4text-decoration-style: wavy; /* also solid, double, dotted and dashed */
5text-decoration-skip-ink: none; /* also auto and all */
6text-underline-offset: -2.8ex;
text-decoration: underline wavy green
On hover this demonstrates
text-decoration-skip-ink: none and
text-underline-offset: -1.5ex;
text-decoration
This is short hand for:
| CSS property | Possible values |
|---|---|
| text-decoration-line: | underline / overline / line-through |
| text-decoration-style: | solid / dashed / dotted / double / wavy |
| text-decoration-color: | blue |
| text-decoration-thickness: | 2px / from-font / auto |
The text-decoration-thickness value from-font uses a thickness defined in the font. If the font does not include this information then the value of auto is chosen. The auto value lets the browser choose the thickness.
text-decoration-skip-ink
This is not part of text-decoration. The default is auto and when set to none the underline or overline will go straight through the texts ascenders and descenders.
specifies how overlines and underlines are drawn when they pass over glyph ascenders and descenders.
On ex and ch units
The width, in pixels, of one full line of text is extrapolated from the relationship between the rem-based font-size and ch-based max-width. By delegating an algorithm to determine this value—rather than hard coding it as a px-based width—we avoid frequent and serious error. In CSS layout terms, an error is malformed or obscured content: data loss for human beings.