CSS Text Decoration

The text-decoration property adds visual decorations to text — underlines, overlines, line-throughs, and more.

Basic Values

/* Underline */
.underlined { text-decoration: underline; }

/* Line through (strikethrough) */
.deleted { text-decoration: line-through; }

/* Overline */
.overlined { text-decoration: overline; }

/* Remove decoration (common for links) */
a { text-decoration: none; }

Shorthand Property

The text-decoration shorthand combines line, style, color, and thickness:

/* line | style | color */
a:hover {
    text-decoration: underline wavy #e74c3c;
}

.fancy {
    text-decoration: underline dotted #3498db;
}

Individual Properties

.custom {
    text-decoration-line: underline;
    text-decoration-style: wavy;       /* solid, double, dotted, dashed, wavy */
    text-decoration-color: #e74c3c;
    text-decoration-thickness: 2px;
    text-underline-offset: 4px;       /* Space between text and underline */
}

Practical Examples

/* Stylish link hover effect */
a {
    text-decoration: none;
    border-bottom: 2px solid transparent;
    transition: border-color 0.3s;
}

a:hover {
    border-bottom-color: currentColor;
}

/* Sale price styling */
.original-price {
    text-decoration: line-through;
    color: #999;
}
.sale-price {
    color: #e74c3c;
    font-weight: bold;
}