CSS Text Decoration: Shadows, Transforms, and Underline Styles

Master CSS text decoration. Learn how to add shadows, transform text case, configure custom underlines, handle text overflows, and control word breaks.

Introduction

Plain text is often functional but visually flat. To make headlines pop off the screen, customize hyperlinks so they match your design system, or manage text that overflows its boundary layout, you need to apply decorative typography filters and transformation properties.

In CSS, text presentation is fine-tuned using properties like text-decoration, text-transform, text-shadow, and overflow containment controls. Mastering these properties allows you to create premium typography designs while preserving structural content and accessibility standards.

What You Will Learn

  • How to add, style, and color underlines and strikes using text-decoration.
  • Transforming case states dynamically with text-transform.
  • Creating depth using multi-layered text-shadow configurations.
  • Containing overflowing text using text-overflow: ellipsis.
  • Managing hyphenations and word wrapping using word-break.

Prerequisites

Detailed Explanation: Core Decoration Properties

Let's break down the essential properties that decorate text content:

1. Text Decoration (text-decoration)

This property is a shorthand that controls lines drawn on or around text:

  • text-decoration-line: Where to place the line (none, underline, overline, line-through).
  • text-decoration-style: The line pattern (solid, double, dotted, dashed, wavy).
  • text-decoration-color: The color of the line.
a {
  /* Underline, blue color, wavy line pattern */
  text-decoration: underline wavy #3b82f6;
}

2. Text Transform (text-transform)

Controls the capitalization of text, allowing you to format content dynamically without changing the raw HTML markup:

  • uppercase: Converts all characters to uppercase.
  • lowercase: Converts all characters to lowercase.
  • capitalize: Capitalizes the first letter of each word.
  • none: Leaves capitalization exactly as written in the source.

3. Text Shadow (text-shadow)

Adds one or more shadows to text elements, creating depth or glow effects:

$$\text{text-shadow: offset-x | offset-y | blur-radius | color};$$

h1 {
  /* Horizontal offset, vertical offset, blur radius, shadow color */
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.4);
}

4. Text Overflow (text-overflow)

Defines how users are notified about hidden, overflowing text within a container.

  • clip: Truncates the text at the container edge (default).
  • ellipsis: Appends an ellipsis symbol (...) to represent truncated text.

> [!IMPORTANT] > For text-overflow: ellipsis; to work, the container MUST also have overflow: hidden; and white-space: nowrap; declared. If the text is allowed to wrap or overflow normally, the ellipsis will never render.

.card-preview {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

5. Word Break (word-break)

Determines how the browser inserts line breaks inside words when text overflows its boundaries:

  • normal: Standard wrapping rules (breaks only at spaces or hyphens).
  • break-all: Breaks words at any exact character to prevent horizontal overflow (useful for URLs or long words).
  • keep-all: Prevents word breaks in Chinese, Japanese, and Korean (CJK) text.

Visual Learning Diagram (Mermaid)

graph TD
    subgraph Text Overflow Ellipsis Requirements
    R1[1. white-space: nowrap <br> Forces text to stay on single line] --> R2[2. overflow: hidden <br> Clips the overflowing text]
    R2 --> R3[3. text-overflow: ellipsis <br> Appends the ... symbol]
    end

Code Examples

Example 1: Custom Premium Hyperlinks

Remove standard underlines and create a custom hover transition:

.custom-link {
  color: #3b82f6;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s ease;
}

.custom-link:hover {
  color: #1d4ed8;
  /* Thick dotted line on hover */
  text-decoration: underline dotted 2px;
}

Example 2: Premium Glow Text Shadow

Layer multiple text shadows to create a neon-glow effect for dark mode titles:

.glow-title {
  background-color: #0f172a;
  color: #38bdf8;
  font-size: 3rem;
  font-weight: 900;
  text-transform: uppercase;
  
  /* Layer 1: soft glow. Layer 2: wide ambient glow. Layer 3: dark contrast backplate. */
  text-shadow: 0 0 10px rgba(56, 189, 248, 0.6),
               0 0 20px rgba(56, 189, 248, 0.4),
               0 4px 8px rgba(0, 0, 0, 0.9);
}

Best Practices & Common Mistakes

  • Avoid Uppercase HTML: Never type text content in ALL CAPS directly inside your HTML (e.g. <h1>LATEST NEWS</h1>). Screen readers will read it letter-by-letter as an acronym (L-A-T-E-S-T N-E-W-S). Instead, type it in standard lowercase/sentence case in HTML and use text-transform: uppercase; in CSS.
  • Underline Signifiers: Never use underlines (text-decoration: underline;) on non-link text blocks. Users universally recognize underlines as clickable links. Underlining normal text confuses users.

FAQs

Q: Can I apply a shadow to an entire card using text-shadow? A: No. text-shadow only applies to the typography letters. To add shadows to element containers (like cards or buttons), use box-shadow instead.

Q: How do I create a multiline truncation with an ellipsis? A: Standard text-overflow: ellipsis only works on single lines. For multiline truncation, you must use WebKit line-clamping:

.multiline-clamp {
  display: -webkit-box;
  -webkit-line-clamp: 3; /* Number of lines to show */
  -webkit-box-orient: vertical;  
  overflow: hidden;
}

Summary

CSS text decoration coordinates aesthetic features of type. text-decoration governs lines (underlines/strikes), text-transform handles casing, text-shadow adds dimensional offsets, while overflow parameters (text-overflow and word-break) structure word wraps.

Related Articles

Next Tutorial

Now that we have mastered fonts and typography spacing, how do elements occupy space on the page layout? Let's check: Introduction to the Box Model.

← Back to Syllabus