CSS Text Decoration

❮ Previous Next ❯

CSS Text Decoration: Underlines, Overlines, and More

The CSS text-decoration property is used to decorate text with lines. It can define whether text is decorated with an underline, an overline, and/or a strike-through.

It is actually a shorthand property that combines three different styling aspects:

text-decoration-line (e.g., underline, line-through)
text-decoration-style (e.g., solid, dashed, wavy)
text-decoration-color (e.g., red, navy)

Syntax and Usage

You can apply one or more decorations to your text at the same time by combining values.

Syntax:

element {
    text-decoration: text-decoration-line text-decoration-style text-decoration-color;
}

Basic Text Decoration Example:

<!DOCTYPE html>
<html>
<head>
    <style>
        body { font-family: sans-serif; font-size: 18px; }
        .underline { text-decoration: underline; }
        .overline { text-decoration: overline; }
        .line-through { text-decoration: line-through; }
        .combination { 
            text-decoration: underline overline dashed red; 
        }
    </style>
</head>
<body>
    <p class="underline">This text has an underline.</p>
    <p class="overline">This text has an overline.</p>
    <p class="line-through">This text is struck-through.</p>
    <p class="combination">This text has multiple decorations!</p>
</body>
</html>

Text Decoration in SVG

The text-decoration property isn't just for standard HTML text; it also acts as a presentation attribute for SVG (Scalable Vector Graphics).

You can use this attribute directly with the following SVG elements:

<text>
<textPath>
<tspan>

SVG Painting Rules

The fill and stroke of the text decoration are given by the fill and stroke of the text at the point where the text decoration is declared.
The paint order of the text decoration is determined by the value of the paint-order attribute.

Note: As a presentation attribute, text-decoration has a direct CSS property counterpart. When both the SVG attribute and the CSS property are specified on an element, the CSS property takes priority.

SVG Text Decoration Example:

<!DOCTYPE html>
<html>
<body>
    <h3>Decorated SVG Text</h3>
    <svg viewBox="0 0 250 50" xmlns="http://www.w3.org/2000/svg" style="background-color: lightblue;">
      <text y="20" text-decoration="underline" fill="navy">Underlined text in SVG</text>
      <text x="0" y="40" text-decoration="line-through" fill="navy">Struck-through text in SVG</text>
    </svg>
</body>
</html>

Technical Specifications

Default value: Depends on the individual properties (usually none for line, solid for style).
Animatable: Yes. You can animate properties like text-decoration-color smoothly on hover.
Applies to: All elements (though it typically only affects text content).

Exercise

Which of the following is NOT a property controlled by the text-decoration shorthand?

text-decoration-line text-decoration-style text-decoration-color text-decoration-width

❮ Previous Next ❯

CSS Basics

Colors & BG

Box Model

Text Styles

CSS Layout

CSS Effects

Advanced