text-decoration
Compose text decoration lines, colors, styles and thicknesses.
Overview
| Class | Declarations |
|---|---|
text-decoration:none | -webkit-text-decoration: none;
text-decoration: none;
|
underline | text-decoration: underline;
|
line-through | text-decoration: line-through;
|
overline | text-decoration: overline;
|
text-decoration:<line>|<color>|<style>|<thickness> | -webkit-text-decoration: <line> <color> <style> <thickness>;
text-decoration: <line> <color> <style> <thickness>;
|
Examples
Set a complete decoration
Declare the line, color, style and thickness together with text-decoration:underline|var(--color-blue-50)|wavy|2px. The line belongs to the text; it does not draw a border around the element.
<!-- Four parts · one shorthand --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl text-decoration:underline|var(--color-blue-50)|wavy|2px"> Design together</p>Generated CSS
@layer theme { :root, :host { --color-blue-50: oklch(58.22% .2279 263.9) }}@layer utilities { .text-decoration\:underline\|var\(--color-blue-50\)\|wavy\|2px { -webkit-text-decoration: underline var(--color-blue-50) wavy 2px; text-decoration: underline var(--color-blue-50) wavy 2px }}A shorthand resets its omitted parts. Use the dedicated longhands when a state should change only one part of an existing decoration.
Use line aliases
underline, line-through and overline set the text-decoration shorthand. Compare the same words with each line placement.
<!-- underline --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline"> Design together</p><!-- line-through --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl line-through"> Design together</p><!-- overline --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl overline"> Design together</p>These aliases also reset the shorthand’s color, style and thickness. Use text-decoration-line to preserve those parts.
Remove decoration
Remove a decoration on the element that draws it. Setting text-decoration:none on an inline child cannot erase the line propagated from its parent.
<!-- Child none · parent still decorated --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline"> Parent <span id="child" class="text-decoration:none">and child</span></p><!-- Origin none · line removed --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl text-decoration:none"> Parent <span id="child" class="text-decoration:none">and child</span></p>This is propagation through the formatting tree, not ordinary property inheritance. Preserve another clear cue when removing an underline from a link.
Apply conditionally
Hover or focus this button to add an underline. The base state has no decoration; print keeps the plain label.
<!-- Pointer and keyboard states --><button id="target" type="button" class="font-2xl leading-xl text-decoration:none text-decoration:none@print underline:hover@screen underline:focus-visible@screen"> Design together</button>The screen-qualified states keep pointer or keyboard focus from overriding the print rule.