How to Underline Text in CSS

What you’ll build or solve

Underline text with CSS so you control where the underline appears and how it looks. You’ll use text-decoration to underline specific text without making a whole page look like one big link.

When this approach works best

This approach works best when underlining is a visual style choice you want to control.

Use it when you:

• Underline headings or labels as part of your design.
• Underline specific words in a tutorial or UI copy.
• Keep links readable while still styling other underlined text consistently.

Skip this approach when:

• You’re underlining lots of body text just for emphasis. Bold or italics are easier to read.
• You’re underlining non-links in dense text where people might try to click it.

Prerequisites

• An HTML file linked to a CSS file or a <style> tag
• Basic comfort with CSS selectors, such as element selectors and classes

Step-by-step instructions

Step 1: Use text-decoration to underline text

Underline with the text-decoration property. Pick the option that matches how you want to apply it.

Option A: Underline a specific element

h2 {
  text-decoration:underline;
}

Option B: Use a reusable class

Use a class when you want to underline just part of a sentence or a few elements.

<p>Run<spanclass="underline">npm install</span> to install packages.</p>

.underline {
  text-decoration:underline;
}

What to look for

• If too much text is underlined, your selector is too broad. Prefer a class over body or wide element selectors.
• If an underline doesn’t show, another rule may be overriding it with text-decoration: none.
• If you remove link underlines for design reasons, add a clear hover and focus style so links stay easy to spot.

Examples you can copy

Example 1: Underline a heading

<h2class="section-title">Getting started</h2>

.section-title {
  text-decoration:underline;
}

Example 2: Underline only one term in a paragraph

<p>Use<spanclass="underline">relative paths</span> for local assets.</p>

.underline {
  text-decoration:underline;
}

Example 3: Adjust underline thickness and offset

<p><spanclass="highlight">Important</span> settings are below.</p>

.highlight {
  text-decoration:underline;
  text-decoration-thickness:2px;
  text-underline-offset:3px;
}

Example 4: Underline links on hover and keyboard focus

<aclass="nav-link"href="/pricing">Pricing</a>

.nav-link {
  text-decoration:none;
}

.nav-link:hover,
.nav-link:focus-visible {
  text-decoration:underline;
}

Common mistakes and how to fix them

Mistake 1: Underlining everything by styling body

What you might do:

body {
  text-decoration:underline;
}

Why it breaks:

Everything looks like a link and becomes hard to scan.

Correct approach:

Target the specific elements that should be underlined.

h2 {
  text-decoration:underline;
}

Mistake 2: Removing link underlines with no hover or focus style

What you might do:

a {
  text-decoration:none;
}

Why it breaks:

Links become harder to spot, especially for accessibility and quick scanning.

Correct approach:

Bring the underline back on hover and keyboard focus.

a {
  text-decoration:none;
}

a:hover,
a:focus-visible {
  text-decoration:underline;
}

Mistake 3: Expecting underline styles to show on elements that don’t contain text

What you might do:

img {
  text-decoration:underline;
}

Why it breaks:

text-decoration only affects text, not images or empty elements.

Correct approach:

Underline the text element, or style a border if you want a line under an image.

.caption {
  text-decoration:underline;
}

Troubleshooting

• If an underline won’t appear, check for another rule setting text-decoration: none.
• If the underline looks too close to the text, add text-underline-offset.
• If the underline looks too thin or too heavy, adjust it with text-decoration-thickness.
• If links are hard to identify after styling, restore underlines on :hover and :focus-visible.
• If nothing changes, confirm your stylesheet is loading and your selector matches the element.

Quick recap

• Use text-decoration: underline to underline text.
• Apply it to an element selector or a reusable class.
• Keep selectors narrow so you don’t underline too much.
• Use text-underline-offset and text-decoration-thickness to refine the look.
• Fix issues by checking overrides, selector scope, and stylesheet loading.