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:3xs">  Balanced underline</a>

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

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

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

Setting the color of text.