CSS Text Decoration: Underline, Overline and Line Through

The CSS text-decoration family controls underlines, overlines and line-through decorations. For links, keep usability in mind: an underline is a familiar indicator that text is clickable.

Underline Top ↑

This link is underlined

a { text-decoration: underline; }

Remove an underline Top ↑

This link has no underline

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

Do not make inline links indistinguishable from surrounding text. If you remove the underline, retain another persistent visual cue and provide clear hover/focus states.

Decoration lines Top ↑

overline

line-through

underline overline

.marked { text-decoration-line: underline overline; }

Decoration style, color and thickness Top ↑

Wavy green underline

.marked {
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: green;
  text-decoration-thickness: 2px;
}

Underline offset Top ↑

a {
  text-underline-offset: .15em;
}

Offset can improve legibility by moving the underline away from glyphs. text-decoration-skip-ink can also affect how an underline passes around letter descenders.

Frequently Asked Questions Top ↑

How do I remove an underline?
Use text-decoration: none.

Can text-decoration combine underline and overline?
Yes. Multiple decoration lines can be specified together.

How do I make a dotted or wavy underline?
Use text-decoration-style or the text-decoration shorthand.

Should links lose their underline?
Only when they remain clearly identifiable as links through another persistent cue.

Buttons as links CSS generator CSS types Fonts Meta tags

Subhendu Mohapatra

Author & Instructor at plus2net

I write and maintain practical tutorials on Python, PHP, SQL, JavaScript, HTML, jQuery, and web development at plus2net. The tutorials focus on clear explanations, working examples, and code that readers can test and adapt while learning.

About the author Watch on YouTube

Connect:

CSS Text Decoration: Underline, Overline and Line-Through