text-decoration-line
Choose decorative lines while preserving their other properties.
Overview
| Class | Declarations |
|---|---|
text-decoration:underline | -webkit-text-decoration: underline;
text-decoration: underline;
|
text-decoration:overline | -webkit-text-decoration: overline;
text-decoration: overline;
|
text-decoration:line-through | -webkit-text-decoration: line-through;
text-decoration: line-through;
|
text-decoration-line:<line>|<…> | text-decoration-line: <line> <…>;
|
Examples
Underline text
text-decoration-line:underline adds a line while leaving the specified color, style and thickness intact. Here the dedicated longhand keeps the blue wavy treatment.
<!-- Underline · independent longhands --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl decoration-wavy text-decoration-line:underline text-decoration-thickness:2px text-decoration-blue-50"> Design together</p>Generated CSS
@layer utilities { .text-decoration-line\:underline { text-decoration-line: underline }}Combine line values
Separate line values with | to emit a space-separated CSS value. Both decorations are painted on the same text run.
<!-- Underline + overline --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl text-decoration-line:underline|overline text-decoration-thickness:2px text-decoration-blue-50"> Design together</p>Use shorthand aliases for common cases
Use the shorter aliases when resetting the full decoration is appropriate. They emit the text-decoration shorthand, not just its line property.
<!-- 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>A strike-through is a visual treatment. Use semantic <s> or <del> when the text is outdated or represents a document deletion.
Apply conditionally
Hover or focus to add an overline to the existing underline. The line longhand leaves the blue color and 2px thickness unchanged. Print keeps one underline.
<!-- Pointer and keyboard states --><button id="target" type="button" class="font-2xl leading-xl text-decoration-line:underline text-decoration-thickness:2px text-decoration-blue-50 text-decoration-line:underline@print text-decoration-line:underline|overline:hover@screen text-decoration-line:underline|overline:focus-visible@screen"> Design together</button>