📏 CSS text-underline-position — Complete Tutorial

The CSS text-underline-position property controls the **exact placement of underlines** relative to text. It is especially useful for improving readability, fixing overlaps with descenders (like g, j, p, q), and creating more polished typography.

>>“Underline placement matters — the right position improves readability and avoids messy text collisions.”

Note

✔ Works with text-decoration: underline
✔ Important for non-Latin scripts (Japanese, Chinese)
✔ Helps prevent underlines touching descenders

📦 Syntax

Syntax

text-underline-position: auto | from-font | under | left | right;

/* Example */
text-underline-position: under;
ValueDescription
autoBrowser default underline position
from-fontUse underline metrics from the font (most accurate)
underMoves underline below descenders to avoid collision
leftUnderlines positioned for vertical text (rare)
rightUnderlines positioned for vertical text (rare)

🎨 1. Basic Usage

Basic example

p {
  text-decoration: underline;
  text-underline-position: under;
}

Moves underline below characters like g/j/p/q to improve readability.

🎨 2. Using from-font (Recommended)

from-font

p {
  text-decoration: underline;
  text-underline-position: from-font;
}

Uses the font’s built-in underline metrics → most accurate for premium typography.

🎨 3. Default Behavior

auto

p {
  text-decoration: underline;
  text-underline-position: auto;
}

Browser decides underline placement (may overlap descenders).

🎨 4. Example Showing Descender Collision Fix

descenders

.text-auto {
  text-decoration: underline;
  text-underline-position: auto; /* may collide */
}

.text-under {
  text-decoration: underline;
  text-underline-position: under; /* improved */
}

under prevents underlines from touching letters like:g, j, p, q, y.

🎨 5. Vertical Writing Modes (Left & Right)

vertical text

.vertical {
  writing-mode: vertical-rl;
  text-decoration: underline;
  text-underline-position: right;
}

Underlines become side-lines in vertical text.right or left controls which side.

🧪 Real-World Use Cases

1️⃣ Clean Underlines in UI Headings

ui heading

h2 {
  text-decoration: underline;
  text-underline-position: under;
}

2️⃣ Blog Paragraph Typography

blog text

p {
  font-family: Georgia, serif;
  text-decoration: underline;
  text-underline-position: from-font;
}

3️⃣ Japanese Vertical Text

japanese text

.jp {
  writing-mode: vertical-rl;
  text-decoration: underline;
  text-underline-position: right;
}

⚠️ Common Mistakes

  • ❌ Expecting it to work without text-decoration: underline
  • ❌ Using under for vertical text (use left/right instead)
  • ❌ Assuming all fonts support from-font
  • ❌ Forgetting script-specific behavior (Asian scripts differ)

Note

If a font does not contain underline metrics, from-font behaves like auto.

🔥 Summary

text-underline-position gives fine control over underline placement, improving readability and aesthetics especially in long-form reading and premium typography.

  • auto → browser default
  • under → best for readability
  • from-font → most accurate for good fonts
  • left/right → vertical text
>>“Great typography isn’t just about fonts — underline positioning matters too.”