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="underline text-decoration:currentColor fg:blue-60">  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:transparent@print text-decoration:currentColor@sm">...</a>