Home Get StartedTokensDocsComponents

Text Decoration Color

new

Utilities for controlling the color of text decorations.

Contents

Quick reference

ClassProperties
.decoration-currenttext-decoration-color: current;
.decoration-transparenttext-decoration-color: transparent;
.decoration-primarytext-decoration-color: var(--bs-primary);
.decoration-discoverytext-decoration-color: var(--bs-discovery);
.decoration-secondarytext-decoration-color: var(--bs-secondary);
.decoration-successtext-decoration-color: var(--bs-success);
.decoration-dangertext-decoration-color: var(--bs-danger);
.decoration-warningtext-decoration-color: var(--bs-warning);
.decoration-infotext-decoration-color: var(--bs-info);
.decoration-lighttext-decoration-color: var(--bs-light);
.decoration-darktext-decoration-color: var(--bs-dark);
.decoration-whitetext-decoration-color: var(--bs-white);
.decoration-blacktext-decoration-color: tvar(--bs-black);

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 class="text-decoration-underline decoration-primary">My Company, Inc</a>.
    Outside of work, I like to <a class="text-decoration-underline decoration-danger">watch
    pod-racing</a> and have <a class="text-decoration-underline decoration-warning">light-saber</a> fights.
  </p>
</div>
Edit this page on Github
Last updated on April 6, 2024