Text decoration in CSS - Deep Dive

Overview - Text decoration

What is it?

Text decoration in CSS is a way to add visual styles like lines or effects to text on a webpage. It lets you underline, overline, or strike through words, or add color and style to these lines. This helps make text clearer, more attractive, or to show special meaning like links or deleted content. It works by applying simple properties to text elements in your HTML.

Why it matters

Without text decoration, web pages would look plain and less readable. Important cues like links being underlined or text being crossed out would be missing, making it harder for users to understand the page quickly. Text decoration improves user experience by guiding attention and adding meaning without extra words. It also helps with accessibility by visually distinguishing text types.

Where it fits

Before learning text decoration, you should know basic CSS syntax and how to select HTML elements. After mastering text decoration, you can explore more advanced CSS styling like fonts, shadows, and animations to create rich text effects.

Mental Model

Core Idea

Text decoration is like adding simple visual marks on text to highlight or change its meaning without changing the text itself.

Think of it like...

Imagine writing a note on paper and using a highlighter, underlining, or crossing out words to show importance or correction. Text decoration does the same on web text.

Text Element
  │
  ├─ Text Decoration Line (underline, overline, line-through)
  ├─ Text Decoration Style (solid, dotted, dashed, wavy)
  ├─ Text Decoration Color
  └─ Text Decoration Thickness

Example:
┌─────────────────────────────┐
│ Hello, world!               │
│ └─ underline, solid, red    │
└─────────────────────────────┘

Build-Up - 7 Steps

1

Foundation

Basic text-decoration property

Concept: Learn the main CSS property that adds lines to text.

The CSS property 'text-decoration' lets you add lines like underline, overline, or line-through to text. For example, 'text-decoration: underline;' draws a line under the text. You can apply it to any text element in HTML using CSS selectors.

Result

Text on the webpage appears with a line under it.

Understanding the basic property shows how simple it is to add meaning or style to text with just one CSS rule.

2

Foundation

Multiple decoration lines

Concept: You can combine different lines on the same text.

Using 'text-decoration-line', you can specify multiple lines like 'underline overline'. For example: 'text-decoration-line: underline overline;' draws lines both above and below the text. This property separates the line type from other decoration styles.

Result

Text shows lines both above and below it simultaneously.

Knowing you can combine lines helps create richer text styles beyond just underlining.

3

Intermediate

Customizing line style and color

🤔Before reading on: do you think text-decoration lines can only be solid and black? Commit to your answer.

Concept: You can change how the decoration line looks and its color.

CSS properties 'text-decoration-style' and 'text-decoration-color' let you change the line's appearance. Styles include solid, dotted, dashed, double, and wavy. Color can be any valid CSS color. For example: p { text-decoration-line: underline; text-decoration-style: wavy; text-decoration-color: red; } This creates a red wavy underline.

Result

Text has a red wavy underline instead of a plain solid black line.

Customizing style and color makes text decoration a powerful tool for matching design and conveying tone.

4

Intermediate

Using text-decoration-thickness

🤔Before reading on: do you think the thickness of text decoration lines can be changed? Commit to yes or no.

Concept: You can control how thick or thin the decoration line is.

The 'text-decoration-thickness' property adjusts the thickness of the decoration line. It accepts length units like '2px' or keywords like 'auto' or 'from-font'. For example: h1 { text-decoration-line: underline; text-decoration-thickness: 3px; } This makes the underline thicker than default.

Result

The underline under the heading is visibly thicker.

Adjusting thickness helps emphasize or soften the decoration, improving visual hierarchy.

5

Intermediate

Shorthand text-decoration property

Concept: Combine line, style, color, and thickness in one property.

The 'text-decoration' shorthand lets you write all decoration settings in one line. For example: span { text-decoration: underline dotted blue 2px; } This means underline line, dotted style, blue color, and 2px thickness all at once.

Result

Text has a blue dotted underline with thickness 2px.

Using shorthand simplifies CSS and keeps code clean and readable.

6

Advanced

Text decoration and accessibility

🤔Before reading on: do you think text decoration affects screen readers or only visual users? Commit to your answer.

Concept: Text decoration is purely visual but impacts how users perceive content meaning.

Screen readers ignore text decoration because it doesn't change the text content. However, visual cues like underlines for links help users understand what is clickable. Designers must ensure decoration matches meaning and not rely solely on color or decoration for important info, to support users with visual impairments.

Result

Webpages are more accessible and usable for all users.

Knowing decoration is visual only guides better inclusive design practices.

7

Expert

Browser rendering and performance quirks

🤔Before reading on: do you think all browsers render text-decoration exactly the same? Commit to yes or no.

Concept: Different browsers handle decoration lines with subtle differences affecting appearance and performance.

Browsers may vary in how they draw wavy or double lines, line thickness limits, or how decoration interacts with text transformations and animations. Some older browsers do not support all styles or thickness control. Understanding these quirks helps developers write fallback styles and test across devices for consistent user experience.

Result

Text decoration looks consistent and performs well on all browsers.

Awareness of browser differences prevents unexpected visual bugs and improves cross-platform reliability.

Under the Hood

Text decoration works by the browser drawing extra lines or effects on top of the text glyphs after layout is calculated. It does not change the text content or font but overlays visual marks based on CSS rules. The rendering engine calculates line position relative to the text baseline and applies styles like color, thickness, and pattern. This separation keeps text selectable and accessible while adding decoration.

Why designed this way?

Separating decoration from text content allows styling without altering meaning or structure. Early web needed simple ways to show links and emphasis. The design evolved to support more styles and control while maintaining accessibility and performance. Alternatives like embedding decoration in fonts were less flexible and harder to update.

┌─────────────────────────────┐
│ Text Content (characters)    │
├─────────────────────────────┤
│ CSS Text Decoration Rules   │
│  ├─ Line type (underline)    │
│  ├─ Style (dotted, wavy)    │
│  ├─ Color                   │
│  └─ Thickness               │
├─────────────────────────────┤
│ Browser Rendering Engine    │
│  └─ Draws decoration lines  │
└─────────────────────────────┘

Myth Busters - 4 Common Misconceptions

Quick: Does 'text-decoration' change the actual text content? Commit to yes or no.

Common Belief: Text decoration changes the text itself, like adding characters or modifying letters.

Reality: Text decoration only adds visual lines or effects on top of the text; it does not alter the text content or characters.

Why it matters: Thinking decoration changes text can lead to confusion about accessibility and text selection behavior.

Quick: Can you style text-decoration lines with any CSS color? Commit to yes or no.

Common Belief: Text decoration lines are always black or inherit the text color and cannot be changed independently.

Reality: You can set 'text-decoration-color' to any valid CSS color, independent of the text color.

Why it matters: Knowing this allows designers to create more expressive and clear text styles.

Quick: Do all browsers support 'text-decoration-thickness'? Commit to yes or no.

Common Belief: All browsers fully support changing the thickness of text decoration lines.

Reality: Support for 'text-decoration-thickness' varies; some older browsers ignore it or have limited support.

Why it matters: Assuming full support can cause inconsistent appearance and unexpected bugs on some devices.

Quick: Does adding multiple lines with 'text-decoration-line' stack lines visually? Commit to yes or no.

Common Belief: Multiple lines like underline and overline stack and overlap perfectly without spacing.

Reality: Browsers space multiple decoration lines apart to avoid overlap, so they appear as separate lines above and below text.

Why it matters: Misunderstanding this can cause layout surprises when combining multiple lines.

Expert Zone

1

Some browsers optimize text-decoration rendering by combining lines with font metrics, which can cause subtle shifts in line position when font or size changes.

2

Using 'text-decoration-skip-ink' controls whether decoration lines break around descenders (like 'g' or 'y'), improving readability but not supported everywhere.

3

Animations on text-decoration properties are limited; animating thickness or style often requires workarounds like using box shadows or pseudo-elements.

When NOT to use

Avoid relying solely on text decoration to convey critical information, especially for accessibility. Use semantic HTML elements like for deletions or for links combined with decoration. For complex text effects or animations, consider SVG or canvas-based solutions instead.

Production Patterns

In real-world sites, text decoration is used to style links consistently, show errors or corrections with line-through, and highlight important text with custom underlines. Designers often combine decoration with color and font changes for branding. Developers use shorthand properties for maintainable CSS and add fallbacks for older browsers.

Connections

Semantic HTML

Builds-on

Understanding text decoration helps reinforce why semantic tags like or are important, as decoration alone does not convey meaning to assistive technologies.

Graphic Design Principles

Same pattern

Text decoration mirrors graphic design techniques like underlining or crossing out text on paper, showing how digital styling follows traditional visual communication methods.

Human Visual Perception

Builds-on

Knowing how people visually scan text and notice lines helps designers choose effective decoration styles that guide attention and improve readability.

Common Pitfalls

#1 Using text-decoration to indicate links without semantic HTML.

Wrong approach: Click me

Correct approach: Click me

Root cause:

Confusing visual style with semantic meaning leads to accessibility and usability issues.

#2 Setting text-decoration color without specifying line type.

Wrong approach:

p { text-decoration-color: red; }

Correct approach:

p { text-decoration-line: underline; text-decoration-color: red; }

Root cause:

Forgetting that color applies only if a decoration line is set causes no visible effect.

#3 Overusing multiple decoration lines causing clutter.

Wrong approach:

h2 { text-decoration-line: underline overline line-through; }

Correct approach:

h2 { text-decoration-line: underline; }

Root cause:

Trying to combine too many lines reduces readability and confuses users.

Key Takeaways

Text decoration adds visual lines like underline, overline, and line-through to text without changing the text itself.

You can customize decoration lines with style, color, and thickness for richer design control.

Text decoration is purely visual and does not affect screen readers or text content meaning.

Using semantic HTML elements alongside decoration ensures accessibility and proper meaning.

Browser support varies for some decoration features, so testing and fallbacks are important.

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