AI CSS Text Decoration — Custom Underlines, Strikethroughs and Line Styling

The default browser underline has been the bane of web typography for decades. It cuts through descenders, uses the same color as the text, and offers zero control over thickness or position. Designers have resorted to border-bottom, box-shadow, and background gradient hacks just to get a decent-looking underline. Modern CSS text-decoration properties finally give us full control over every aspect of text decoration lines.

An AI CSS text-decoration generator lets you visually configure underline color, thickness, offset, and style — solid, dashed, dotted, or wavy — then export clean CSS that works across all modern browsers. No more hacks, no more compromises.

The Text Decoration Shorthand

The text-decoration property is actually a shorthand that combines four individual properties into one declaration:

/* Shorthand: line  style  color  thickness */
.decorated {
  text-decoration: underline wavy #00cec9 2px;
}

/* Equivalent longhand properties */
.decorated {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: #00cec9;
  text-decoration-thickness: 2px;
}

Each sub-property controls a different aspect of the decoration line:

• text-decoration-line — which lines to draw: underline, overline, line-through, or combinations
• text-decoration-style — the line pattern: solid, double, dotted, dashed, or wavy
• text-decoration-color — the line color, independent of text color
• text-decoration-thickness — the line width in pixels, ems, or from-font

The ability to set decoration color independently from text color was a game-changer. Before text-decoration-color, the underline always matched the text color, making colored underlines impossible without hacks.

Controlling Underline Position with text-underline-offset

The text-underline-offset property controls the distance between the text baseline and the underline. This is the property that finally solves the descender problem — letters like g, p, y, and q no longer get sliced by the underline:

/* Default: underline sits on or cuts through descenders */
.default-underline {
  text-decoration: underline;
}

/* Offset: underline drops below descenders */
.clean-underline {
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* Larger offset for a more relaxed, editorial look */
.editorial-underline {
  text-decoration: underline;
  text-decoration-color: rgba(108, 92, 231, 0.4);
  text-decoration-thickness: 2px;
  text-underline-offset: 6px;
}

The text-decoration-skip-ink Property

Modern browsers include text-decoration-skip-ink: auto by default, which intelligently breaks the underline around descenders and ascenders. This creates small gaps in the underline where it would otherwise collide with letter strokes:

/* Default in modern browsers — gaps around descenders */
.smart-underline {
  text-decoration: underline;
  text-decoration-skip-ink: auto;
}

/* Continuous underline with no gaps */
.continuous-underline {
  text-decoration: underline;
  text-decoration-skip-ink: none;
}

/* Skip all ink — maximum clearance */
.max-skip {
  text-decoration: underline;
  text-decoration-skip-ink: all;
}

For body text, auto is almost always the right choice — it improves readability by keeping the underline from obscuring letter shapes. For decorative headings where the underline is a design element, none gives you a clean, unbroken line. For more text styling techniques, see our CSS text-transform guide.

Styling Links with Modern Text Decoration

Links are the most common use case for text decoration, and modern properties let you create link styles that were previously impossible without hacks:

/* Subtle accent underline */
a {
  color: #e2e2e8;
  text-decoration: underline;
  text-decoration-color: rgba(0, 206, 201, 0.3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: text-decoration-color 0.2s,
              text-underline-offset 0.2s;
}

a:hover {
  text-decoration-color: #00cec9;
  text-underline-offset: 2px;
}

/* Thick highlight underline that grows on hover */
.highlight-link {
  text-decoration: underline;
  text-decoration-color: rgba(108, 92, 231, 0.4);
  text-decoration-thickness: 3px;
  text-underline-offset: 2px;
  transition: text-decoration-thickness 0.2s,
              text-decoration-color 0.2s;
}

.highlight-link:hover {
  text-decoration-color: #6c5ce7;
  text-decoration-thickness: 6px;
}

The transition on text-decoration-color and text-underline-offset creates a smooth hover effect that feels polished and intentional. This replaces the old approach of using border-bottom with padding, which affected layout and did not follow the text on line wraps.

Multi-Line Link Underlines

One major advantage of text-decoration over border-bottom is that decoration lines follow the text across line breaks. A border-bottom only appears on the last line of a wrapped link, but text-decoration: underline underlines every line:

/* border-bottom: only underlines the last line */
.border-link {
  text-decoration: none;
  border-bottom: 2px solid #00cec9;
  /* Breaks on multi-line text! */
}

/* text-decoration: underlines every line correctly */
.decoration-link {
  text-decoration: underline;
  text-decoration-color: #00cec9;
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
  /* Works perfectly on wrapped text */
}

This is especially important for mobile layouts where links in body text frequently wrap to multiple lines.

Strikethrough and Line-Through Effects

The line-through decoration is essential for showing deleted content, completed tasks, price comparisons, and editorial corrections:

/* Basic strikethrough */
.deleted {
  text-decoration: line-through;
  text-decoration-color: #e74c3c;
}

/* Sale price comparison */
.original-price {
  text-decoration: line-through;
  text-decoration-color: rgba(136, 136, 160, 0.6);
  text-decoration-thickness: 1px;
  color: var(--muted);
}

.sale-price {
  color: #55efc4;
  font-weight: 700;
  font-size: 1.2em;
}

/* Completed task in a to-do list */
.task-done {
  text-decoration: line-through;
  text-decoration-color: rgba(0, 206, 201, 0.5);
  text-decoration-thickness: 2px;
  color: var(--muted);
}

Using a semi-transparent decoration color for strikethroughs keeps the original text readable while clearly indicating it has been crossed out. A fully opaque red line can make text hard to read, which defeats the purpose if users need to see what was deleted.

Combining Multiple Decoration Lines

You can apply multiple decoration lines to a single element by listing them in text-decoration-line:

/* Underline and overline together */
.framed-text {
  text-decoration-line: underline overline;
  text-decoration-style: solid;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* All three lines for maximum emphasis */
.super-emphasis {
  text-decoration-line: underline overline line-through;
  text-decoration-style: double;
  text-decoration-color: #e74c3c;
}

/* Wavy overline for decorative headings */
.fancy-heading {
  text-decoration-line: overline;
  text-decoration-style: wavy;
  text-decoration-color: rgba(108, 92, 231, 0.5);
  text-decoration-thickness: 2px;
}

Combined decoration lines share the same style, color, and thickness. If you need different styles for the underline and overline, you will need to use a pseudo-element for one of them. For creative text effects that pair well with decorations, explore our CSS text shadow guide.

Wavy Underlines for Error States and Highlights

The wavy decoration style is instantly recognizable from spell-checkers and code editors. It is perfect for indicating errors, warnings, or highlighted content:

/* Spell-check style error indicator */
.spelling-error {
  text-decoration: underline wavy #e74c3c;
  text-decoration-thickness: 1px;
}

/* Warning indicator */
.warning-text {
  text-decoration: underline wavy #fdcb6e;
  text-decoration-thickness: 1px;
}

/* Decorative wavy accent */
.wavy-accent {
  text-decoration: underline wavy rgba(0, 206, 201, 0.4);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

Building a Complete Text Decoration System

Modern CSS text-decoration properties transform what was once a binary on/off underline into a full typographic tool. Combined with other text styling properties, you can build a cohesive decoration system for your entire project:

• CSS Text Transform for case transformations that pair with decoration styles
• CSS @font-face Guide for custom fonts that interact with from-font thickness
• CSS Hyphens Guide for hyphenation that works alongside decorated text
• CSS Line Clamp for truncated text with proper decoration handling
• CSS Word Break for text wrapping strategies that affect multi-line decorations

The AI CSS text styling tools let you experiment with text-decoration properties alongside text-transform, letter-spacing, and other typography controls. See how different decoration styles look with your actual fonts and colors before committing to code.