Text decoration in CSS - Browser Rendering Trace

Render Flow - Text decoration

[Parse CSS selector] -> [Match elements] -> [Calculate specificity] -> [Apply text-decoration properties] -> [Repaint text with decoration] -> [Composite]

The browser reads CSS rules, finds matching text elements, applies text-decoration styles, repaints the text with decorations like underline or line-through, then composites the final image.

Render Steps - 3 Steps

Code Added:p { text-decoration: underline; }

Before

[p]
This is a simple text example.

→

After

[p]
This is a simple text example.
___________

Adding 'underline' draws a straight line below the text.

🔧 Browser Action:Triggers repaint to add underline decoration

Code Sample

This code underlines the paragraph text with a red wavy line.

CSS

<p>This is a simple text example.</p>

CSS

p {
  text-decoration: underline;
  text-decoration-color: red;
  text-decoration-style: wavy;
}

Render Quiz - 3 Questions

After applying step 1, what visual change do you see?

A Text color changes to red

B A straight line under the text

C Text becomes bold

D Text is crossed out

Common Confusions - 3 Topics

Why doesn't my underline change color when I set text color?

The underline color is controlled by text-decoration-color, not the text color property. You must set text-decoration-color separately to change underline color (see step 2).

💡 Underline color is independent from text color.

Why is my underline straight even after setting text-decoration-style?

Some browsers may not support all styles fully. Also, text-decoration-style only affects the decoration line, so you must have a decoration like underline first (step 1) before style changes apply (step 3).

💡 Set text-decoration first, then style.

Why can't I see the underline on some elements?

Text decoration applies only to text-containing elements. If the element has no visible text or is hidden, the decoration won't show.

💡 Decoration needs visible text to appear.

Property Reference

Property	Values	Visual Effect	Common Use
text-decoration	none, underline, overline, line-through, blink	Adds lines above, below, or through text	Highlight or mark text
text-decoration-color	color values (e.g. red, #f00)	Changes color of decoration lines	Match decoration color to design
text-decoration-style	solid, double, dotted, dashed, wavy	Changes line style of decoration	Create different underline effects
text-decoration-thickness	auto, from 1px to 10px or more	Adjusts thickness of decoration lines	Make decoration bolder or thinner

Concept Snapshot

text-decoration adds lines like underline, overline, or line-through to text. text-decoration-color changes the color of these lines. text-decoration-style changes the line pattern (solid, wavy, dotted). text-decoration-thickness adjusts line thickness. These properties repaint text decorations without affecting text color.