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.

Practice

1. Which CSS property is used to add an underline to text?

easy

A. text-transform

B. font-style

C. line-height

D. text-decoration

Solution

1. Step 1: Identify the property for text lines

   The property text-decoration controls lines like underline, overline, and line-through on text.

2. Step 2: Confirm the underline effect

   Using text-decoration: underline; adds an underline to the text.

3. Final Answer:

   text-decoration -> Option D

4. Quick Check:

   Underline = text-decoration [OK]

Hint: Underline text with text-decoration property [OK]

Common Mistakes:

• Confusing font-style with underline
• Using text-transform which changes case
• Using line-height which controls spacing

2. Which of the following is the correct syntax to add a line-through effect to text in CSS?

easy

A. text-decoration: strike;

B. text-decoration: line-through;

C. text-decoration: crossed;

D. text-decoration: overline;

Solution

1. Step 1: Recall valid text-decoration values

   The valid values for text-decoration include underline, overline, and line-through.

2. Step 2: Match the line-through effect

   The correct value to cross out text is line-through. Other options like strike or crossed are invalid.

3. Final Answer:

   text-decoration: line-through; -> Option B

4. Quick Check:

   Line-through = line-through [OK]

Hint: Use line-through for strike effect in text-decoration [OK]

Common Mistakes:

• Using invalid values like strike or crossed
• Confusing overline with line-through
• Missing the colon or semicolon in syntax

3. What will be the visual effect of this CSS on a paragraph?

p { text-decoration: underline overline; }

medium

A. The paragraph text will only have an overline.

B. The paragraph text will only have an underline.

C. The paragraph text will have both an underline and an overline.

D. The paragraph text will have no decoration.

Solution

1. Step 1: Understand multiple values in text-decoration

   The text-decoration property can accept multiple values separated by spaces to combine effects.

2. Step 2: Apply underline and overline together

   Using underline overline applies both lines above and below the text simultaneously.

3. Final Answer:

   The paragraph text will have both an underline and an overline. -> Option C

4. Quick Check:

   Multiple decorations combine = both lines [OK]

Hint: Multiple text-decoration values add multiple lines [OK]

Common Mistakes:

• Assuming only the first value applies
• Thinking values override each other
• Confusing overline with underline

4. Identify the error in this CSS code snippet:

h1 { text-decoration: underlined; }

medium

A. The value 'underlined' is invalid for text-decoration.

B. The property name should be 'text-decoration-line'.

C. Missing semicolon after the value.

D. The selector 'h1' is incorrect.

Solution

1. Step 1: Check valid values for text-decoration

   Valid values include underline, overline, line-through, but not underlined.

2. Step 2: Confirm property and syntax correctness

   The property text-decoration is correct and semicolon is present. The selector h1 is valid.

3. Final Answer:

   The value 'underlined' is invalid for text-decoration. -> Option A

4. Quick Check:

   Valid values only = underline, overline, line-through [OK]

Hint: Use exact values: underline, not underlined [OK]

Common Mistakes:

• Adding 'd' to underline value
• Confusing property names
• Ignoring semicolon errors

5. You want to style a link so it has a red underline only when hovered, and no decoration normally. Which CSS code achieves this?

hard

A. a { text-decoration: none; } a:hover { text-decoration: underline; text-decoration-color: red; }

B. a { text-decoration: underline red; } a:hover { text-decoration: none; }

C. a { text-decoration-color: red; } a:hover { text-decoration: none; }

D. a { text-decoration: underline; } a:hover { text-decoration-color: red; }

Solution

1. Step 1: Set no decoration normally

   Use text-decoration: none; on the link to remove underline by default.

2. Step 2: Add red underline on hover

   On a:hover, add text-decoration: underline; and set text-decoration-color: red; to color the underline red.

3. Final Answer:

   a { text-decoration: none; } a:hover { text-decoration: underline; text-decoration-color: red; } -> Option A

4. Quick Check:

   None normally + red underline on hover = a { text-decoration: none; } a:hover { text-decoration: underline; text-decoration-color: red; } [OK]

Hint: Use none normally, underline + color on hover [OK]

Common Mistakes:

• Setting underline always, not only on hover
• Using text-decoration-color without underline
• Reversing hover and normal styles