The CSS text-decoration underline property adds a visual line beneath inline text, helping emphasize links, headings, or inline elements. When applied thoughtfully, it improves scannability and reinforces interactive patterns.
Used effectively, text-decoration underline enhances readability and signals actionable content without altering element semantics. This guide covers practical syntax, accessibility considerations, and implementation patterns for modern layouts.
| Property | Values | Initial | Applies to | Animatable |
|---|---|---|---|---|
| text-decoration-line | none, underline, overline, line-through, blink | none | all elements | no |
| text-decoration-style | solid, double, dotted, dashed, wavy | solid | all elements | no |
| text-decoration-color | color keywords, hex, rgb, hsl, transparent | currentColor | all elements | yes |
| text-decoration-thickness | auto, from-font, length | auto | all elements | yes |
| text-decoration-skip-ink | auto, none | auto | all elements | no |
text-decoration underline syntax basics
Shorthand property
The shorthand text-decoration combines line, style, color, and thickness in one declaration. Example: text-decoration: underline wavy red 2px; applies a wavy red line 2 pixels thick.
Individual properties
Use text-decoration-line to control which decoration appears. text-decoration-style changes appearance, text-decoration-color adjusts ink color, and text-decoration-thickness sets line height. text-decoration-skip-ink avoids inking over descenders in certain fonts.
accessibility considerations for underline text
Underlining non-links
Underlining text that is not a link can confuse users by mimicking interactive content. Reserve underlines for links or annotate with clear context and ARIA attributes if necessary.
Color and contrast
Ensure sufficient contrast between the underline color and background, meeting WCAG guidelines. Avoid low-contrast decorations that reduce legibility for users with visual impairments.
browser support and rendering behavior
Progressive enhancement
All modern browsers support text-decoration properties, with minor differences in default thickness and skip-ink behavior. Test rendering across platforms, especially when using wavy or custom thickness values.
best practices and next steps
- Use underline to highlight actionable or navigable text while preserving normal document semantics.
- Maintain strong color contrast and avoid underlining non-interactive content unless contextually clear.
- Prefer individual properties for precise control; test rendering on target devices and browsers.
- Consider motion preferences and reduced-motion settings when pairing underlines with transitions.
- Validate accessibility with automated checks and manual screen reader testing.
FAQ
Reader questions
Does text-decoration underline affect layout or block flow?
No, text-decoration only paints visual effects and does not change box dimensions, margins, or document flow.
Can I underline only part of a line of text?
Yes, wrap the segment in a span and apply text-decoration properties to that inline element.
Will text-decoration underline appear on inputs and buttons automatically?
Browsers may apply their own default decorations; explicitly set text-decoration to ensure consistent appearance across controls.
What happens when text-decoration interacts with vertical text or rotated elements?
The underline follows the writing direction, appearing along the text baseline and adapting to vertical or rotated contexts.