text-decoration-thickness
Set the weight of decorative lines without changing the text size.
Overview
| Class | Declarations |
|---|---|
text-decoration-thickness:auto | text-decoration-thickness: auto;
|
text-decoration-thickness:from-font | text-decoration-thickness: from-font;
|
text-decoration-thickness:<size> | text-decoration-thickness: <size>;
|
Examples
Set decoration thickness
text-decoration-thickness sets the weight of an existing underline, overline or strike-through. Compare 1px and 3px with the same font and offset.
<!-- Thickness · 1px --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-color-blue-50 text-decoration-thickness:1px text-underline-3xs"> Design together</p><!-- Thickness · 3px --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-color-blue-50 text-decoration-thickness:3px text-underline-3xs"> Design together</p>Generated CSS
@layer utilities { .text-decoration-thickness\:3px { text-decoration-thickness: 3px }}Use font-provided thickness
text-decoration-thickness:from-font requests the font’s preferred underline thickness. If that metric is unavailable, the browser falls back to its automatic choice.
<!-- Thickness · auto --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-thickness:auto"> Design together</p><!-- Thickness · from-font --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-thickness:from-font"> Design together</p>The two values may look identical. The readout reports the requested keyword, not a measured stroke thickness. Use the thickness longhand to retain the underline.
Pair with underline offset
Offset and thickness control separate parts of the underline. Compare the same 3px line at 2px and 6px offsets; neither changes the text box’s layout height.
<!-- 3px thickness · 2px offset --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-thickness:3px text-underline-offset:2px"> Design together</p><!-- 3px thickness · 6px offset --><p id="target" class="inline-block max-w:100% m:0 font-2xl leading-xl underline text-decoration-thickness:3px text-underline-offset:6px"> Design together</p>Inspect the actual font’s descenders and line spacing before selecting an offset.
Apply conditionally
Hover or focus to increase the underline from 1px to 3px. Print uses the thinner line. The label keeps its font size and line height.
<!-- Pointer and keyboard states --><button id="target" type="button" class="font-2xl leading-xl underline text-decoration-thickness:1px text-underline-3xs text-decoration-thickness:1px@print text-decoration-thickness:3px:hover@screen text-decoration-thickness:3px:focus-visible@screen"> Design together</button>