Question 1

How do I underline text with a custom color in CSS?

Accepted Answer

Use text-decoration-color: .text { text-decoration: underline; text-decoration-color: #ff6600; }. Or use the shorthand: text-decoration: underline #ff6600 wavy. You can combine line type (underline, overline, line-through), color, and style (solid, wavy, dashed, dotted, double).

Question 2

How do I add a wavy underline to text?

Accepted Answer

Use text-decoration-style: wavy: text-decoration: underline wavy #ff0000. This creates a red wavy underline. The CSS text-underline-offset property controls the gap between text baseline and the underline: text-underline-offset: 4px.

Question 3

What is text-decoration-skip-ink?

Accepted Answer

text-decoration-skip-ink: auto (default) makes underlines jump over descenders — the tails of letters like g, p, y. This prevents underlines from crossing through letters. Set to none if you want a continuous underline that passes through descenders.

CSS Text Decoration Generator

Live Preview

Generated CSS

Related Tools