text-decoration-color

decoration

Sets text-decoration-color via --decoration.

CSS Rules

.decoration {
  text-decoration-color: var(--decoration);
}

Usage

<element class="decoration" style="--decoration: /* value */;" />

Responsive & Dark Mode

Prefix .decoration utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first.

<element class="md:decoration" style="--md-decoration: /* value */;" />

<element class="dark:sm:decoration" style="--dark-sm-decoration: /* value */;" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="decoration:hover" style="--decoration-hover: /* value */;" />

<element class="dark:sm:decoration:hover" style="--dark-sm-decoration-hover: /* value */;" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="decoration:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before decoration::before" style="--decoration-before: /* value */;" />

<element class="content-after decoration::after" style="--decoration-after: /* value */;" />

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="decoration=value" />

<!-- Output -->
<element class="decoration" style="--decoration: value;" />

decoration/o

Sets text-decoration-color + opacity via --decoration and --decoration-o.

CSS Rules

.decoration\/o {
  text-decoration-color: color-mix(in oklab, var(--decoration) var(--decoration-o, 100%), transparent);
}

Usage

<element
  class="decoration/o"
  style="
    --decoration: /* value */;
    --decoration-o: /* value */;
  "
></element>

Responsive & Dark Mode

Prefix .decoration/o utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl). If dark mode is applied, the dark: prefix always comes first.

<element
  class="md:decoration/o"
  style="
    --md-decoration: /* value */;
    --md-decoration-o: /* value */;
  "
></element>

<element
  class="dark:sm:decoration/o"
  style="
    --dark-sm-decoration: /* value */;
    --dark-sm-decoration-o: /* value */;
  "
></element>

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints and dark mode.

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element
  class="decoration/o:hover"
  style="
    --decoration-hover: /* value */;
    --decoration-o-hover: /* value */;
  "
></element>

<element
  class="dark:sm:decoration/o:hover"
  style="
    --dark-sm-decoration-hover: /* value */;
    --dark-sm-decoration-o-hover: /* value */;
  "
></element>

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="decoration/o:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element
  class="content-before decoration/o::before"
  style="
    --decoration-before: /* value */;
    --decoration-o-before: /* value */;
  "
></element>

<element
  class="content-after decoration/o::after"
  style="
    --decoration-after: /* value */;
    --decoration-o-after: /* value */;
  "
></element>

Shorthand

Value-driven classes support a shorthand syntax like bg=pink or p=4. The runtime processes this for you. Unlike :hover that is generating CSS on the fly, shorthand only splits it and appends the corresponding style.

<!-- Input -->
<element class="decoration/o=value" />

<!-- Output -->
<element class="decoration/o" style="--decoration: value;" />

decoration-inherit

Sets text-decoration-color to inherit from the parent element.

CSS Rules

.decoration-inherit {
  text-decoration-color: inherit;
}

Usage

<element class="decoration-inherit" />

Responsive

Prefix .decoration-inherit utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:decoration-inherit" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="decoration-inherit:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="decoration-inherit:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before decoration-inherit::before" />

<element class="content-after decoration-inherit::after" />

decoration-current

Sets text-decoration-color to match the current text color (currentColor).

CSS Rules

.decoration-current {
  text-decoration-color: currentColor;
}

Usage

<element class="decoration-current" />

Responsive

Prefix .decoration-current utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:decoration-current" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="decoration-current:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="decoration-current:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before decoration-current::before" />

<element class="content-after decoration-current::after" />

decoration-transparent

Sets text-decoration-color to transparent, hiding the decoration's color.

CSS Rules

.decoration-transparent {
  text-decoration-color: transparent;
}

Usage

<element class="decoration-transparent" />

Responsive

Prefix .decoration-transparent utility with a breakpoint variant (e.g., md:) to apply styles at specific screen sizes (Supported breakpoints are xm through 2xl).

<element class="md:decoration-transparent" />

States

States are generated dynamically at runtime and always come last. Append a state like :hover or :focus to the end of the class. This works in conjunction with breakpoints .

Supported pseudo-classes: :hover, :active, :focus, :focus-visible, :focus-within, :target, :checked, :disabled, and :group-hover.

<element class="decoration-transparent:hover" />

Group Hover Example

The :group-hover state applies styles when a parent element with the .group class is hovered.

<element class="group">
  <element class="decoration-transparent:group-hover">...</element>
</element>

Pseudo-Elements

The ::before and ::after utility classes are supported too. Granted that you add the mandatory content-before or content-after class in order for them to work.

<element class="content-before decoration-transparent::before" />

<element class="content-after decoration-transparent::after" />