Text Decoration & Transform

These properties modify the visual presentation of text without changing its HTML content.

text-decoration

The shorthand includes text-decoration-line (underline, overline, line-through, none), text-decoration-color, text-decoration-style (solid, dashed, dotted, wavy), and text-decoration-thickness.

text-underline-offset

Moves the underline away from the baseline — essential for legible link underlines in modern designs.

text-transform

Accepts uppercase, lowercase, capitalize, and none. Transformations happen visually; the underlying HTML text is unchanged.

Example

/* Stylish custom underline on links */
a {
    text-decoration: underline;
    text-decoration-color: #1a73e8;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;
    color: inherit;
}
a:hover {
    text-decoration-style: wavy;
    text-decoration-color: #b31412;
}

/* Remove underline but add bottom border for control */
.nav-link {
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.2s;
}
.nav-link:hover {
    border-bottom-color: currentColor;
}

/* Uppercase label without changing HTML */
.badge {
    text-transform: uppercase;
    font-size: 0.7rem;
    letter-spacing: 0.1em;
}

/* Strikethrough for discounted price */
.original-price {
    text-decoration: line-through;
    color: #999;
}

CSS

Full Editor

Pro Tip

Use text-underline-offset to give links breathing room — an offset of 3px to 5px moves the underline below the descenders, making it much easier to read at small sizes.

Related Resources

CSS Reference

Complete tag & property list

CSS How-To Guides

Step-by-step practical guides

CSS Exercises

Practice what you've learned