Typography

text-decoration-line

Setting the kind of decoration that is used on text.

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

Use text-decoration-line:underline when the line property should be controlled explicitly.

<a class="text-decoration-line:underline">    Underlined</a>

Generated CSS

@layer utilities {    .text-decoration-line\:underline {        text-decoration-line: underline    }}

Separate multiple line values with | so they become space-separated CSS values.

<span class="text-decoration-line:underline|overline">    Marked</span>

The shorter underline, line-through, and overline aliases are useful when only the line matters.

<span class="line-through">Removed</span>

Apply styles based on different states using selectors and conditional queries.

<span class="text-decoration-line:underline:hover text-decoration-line:underline|overline@sm text-decoration:none@print">...</span>

Setting the color of decorative lines on text.

Setting the style of the decoration line that is used on text.