Typography

text-decoration-thickness

Setting thickness of the decoration line.

Class	Declarations
`text-decoration:from-font`	`-webkit-text-decoration: from-font; text-decoration: from-font;`
`text-decoration-thickness:<size>`	`text-decoration-thickness: <size>;`

Examples

Use text-decoration-thickness:* to control underline, overline, or line-through weight.

<a class="underline text-decoration-thickness:2px">    Strong underline</a>

Generated CSS

@layer utilities {    .text-decoration-thickness\:2px {        text-decoration-thickness: 2px    }}

Use text-decoration:from-font when the typeface provides an underline thickness that should be respected.

<a class="underline text-decoration:from-font">    Typeface underline</a>

Thicker decorations usually need a slightly larger text-underline-offset.

<a class="underline text-decoration-thickness:2px text-underline-offset:4px">    Balanced underline</a>

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

<a class="text-decoration-thickness:2px:hover text-decoration:from-font@sm text-decoration-thickness:1px@print">...</a>

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

Setting the color of text.