text-decoration-color
Color decorative lines independently of the text fill.
Overview
| Class | Declarations |
|---|---|
text-decoration-current | text-decoration-color: currentColor;
|
text-decoration-color:transparent | text-decoration-color: transparent;
|
text-decoration:<color> | -webkit-text-decoration: <color>;
text-decoration: <color>;
|
Examples
Set decoration color
text-decoration-color-blue-50 changes the line color without changing the glyph color. Both specimens explicitly supply an underline; a color alone cannot create one.
<!-- Current foreground --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-color:currentColor text-decoration-thickness:2px"> Design together</p><!-- Independent blue line --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-color-blue-50 text-decoration-thickness:2px"> Design together</p>Generated CSS
@layer theme { :root, :host { --color-blue-50: oklch(58.22% .2279 263.9) }}@layer utilities { .text-decoration-color-blue-50 { text-decoration-color: var(--color-blue-50) }}Follow the current text color
text-decoration-current sets the decoration color to currentColor. Change the foreground and the underline follows it.
<!-- Foreground · blue-50 --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-thickness:2px text-decoration-current fg-blue-50"> Design together</p><!-- Foreground · violet-50 --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-thickness:2px text-decoration-current fg-violet-50"> Design together</p>The line is still required. Unlike a full text-decoration shorthand, this color form leaves its line and style intact.
Hide decoration color
text-decoration-color:transparent hides the line’s paint while retaining its line type and thickness. Decoration does not reserve extra layout space in either state.
<!-- Line color · blue-50 --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-thickness:3px text-decoration-blue-50"> Design together</p><!-- Line color · transparent --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-thickness:3px text-decoration-color:transparent"> Design together</p>Use a visible treatment when the line communicates a link or status; transparent paint carries no visible cue.
Apply conditionally
Hover or focus to change only the underline color from the current foreground to blue. Print retains the current foreground color.
<!-- Pointer and keyboard states --><button id="target" type="button" class="font-2xl leading-xl underline text-decoration-thickness:2px text-decoration-current text-decoration-current@print text-decoration-color-blue-50:hover@screen text-decoration-color-blue-50:focus-visible@screen"> Design together</button>