CSS text decoration

The CSS text decoration module defines features relating to text decoration, such as underlines, text shadows, and emphasis marks. Text decoration features can provide visual cues for spelling errors, grammar issues, and links. These features can help improve the usability, accessibility, functionality, and aesthetics of your text.

By varying the color, style, and thickness of text decoration using pseudo-classes and pseudo-elements, you can highlight the emphasis in text in ways that don't rely on color alone.

Several features can help improve text readability:

• text-decoration-skip-ink can increase legibility by skipping descenders.
• text-underline-offset enables you to fine-tune the underline placement to better match font metrics or design aesthetics, which can be especially useful for unique typefaces.
• text-shadow colors that contrast with text color can make the text visually pop when placed on a background with insufficient contrast.

These features all help improve legibility, and therefore, accessibility. Reducing visual noise and improving text clarity is especially helpful for users with dyslexia or low vision.

In the writing systems of some languages, overlines and underlines carry semantic meaning. CSS lets you adapt styling to cultural norms. Text decoration features are especially useful for languages that do not use Latin-based scripts and instead follow different underline placements, such as Japanese and Korean.

Text decoration features also enable you to follow editorial and localization standards that come from print media. For example, with a strikethrough (line-through), you can indicate the status of content. Use it to inform users that content has been removed or that prices have been halved. This feature lets you present both the original and the updated content. Overlines or double underlines are commonly used for academic and editorial annotations.