Typography

Text Decoration Color

Utilities for controlling the color of text decorations.

Basic usage

Setting the text decoration color

Use the decoration-{color} utilities to change the color of an element's text decoration.

I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at My Company, Inc. Outside of work, I like to watch pod-racing and have light-saber fights.

<div>
  <p>I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at
    <a className="underline **decoration-sky-500**">My Company, Inc</a>.
    Outside of work, I like to <a className="underline **decoration-pink-500**">watch
    pod-racing</a> and have <a className="underline **decoration-indigo-500**">light-saber</a> fights.
  </p>
</div>

Changing the opacity

Control the opacity of an element's text decoration color using the color opacity modifier.

I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at My Company, Inc. Outside of work, I like to watch pod-racing and have light-saber fights.

<div>
  <p>
    I’m Derek, an astro-engineer based in Tattooine. I like to build X-Wings at
    <a className="underline **decoration-sky-500/30**">My Company, Inc</a>.
    Outside of work, I like to <a className="underline **decoration-pink-500/30**">watch
    pod-racing</a> and have <a className="underline **decoration-indigo-500/30**">light-saber</a> fights.
  </p>
</div>

You can use any value defined in your opacity scale, or use arbitrary values if you need to deviate from your design tokens.

<strong className="underline **decoration-sky-500/[.33]**"></strong>