text-decoration-color

Setting the color of decorative lines on text.

Overview

Examples

Set decoration color

Use text-decoration-color:* when only the decoration color should change.

<a class="underline text-decoration-color:blue-60">    Colored underline</a>

@layer theme {    :root {        --color-blue-60: oklch(51.83% .2687 266.1)    }}@layer utilities {    .text-decoration-color\:blue-60 {        text-decoration-color: var(--color-blue-60)    }}

Follow the current text color

Use text-decoration:currentColor when the decoration should track the foreground color.

<a class="fg:blue-60 underline text-decoration:currentColor">    Current color underline</a>

Hide decoration color

Use text-decoration:transparent when spacing or thickness should remain but the decoration should not be visible.

<a class="underline text-decoration:transparent">    Invisible underline</a>

Apply conditionally

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

<a class="text-decoration-color:blue-60:hover text-decoration:currentColor@sm text-decoration:transparent@print">...</a>