Text Decoration

Make links recognizable at a glance

Text decoration can underline a link, strike through an old price, or mark an edited phrase. For normal links in a paragraph, an underline gives a useful cue beyond color. Adjust its thickness and position to improve readability without making the link feel like a separate component.

How to use this tool

1. Choose a decoration line and style. Start with a solid underline for a conventional text link.
2. Adjust thickness and color, then check lowercase letters with descenders. Underline offset can create space below the text.
3. Copy the decoration rules onto the link selector. Keep a visible keyboard focus style and check the visited-link appearance.

Relative em units let the line thickness and offset scale with the text size. These rules style the underline without changing the link destination or behavior. The underlying element should still be an anchor with a meaningful href.