Removing text decoration

Learn to remove and re-add link underlines.

Control the underline

Browsers draw an underline under a links by default. That underline is the clearest sign that separates a link from normal text. The text-decoration property lets us control it.

To remove the underline, write text-decoration: none; to add it back, write text-decoration: underline. This control is common in menu bars and button-like links.

Add it back on hover

A common pattern: remove the underline on a link, then add it back on hover. Visitors still spot the link from surrounding text, but the page looks less busy.

Here is how: a { text-decoration: none; } removes the underline; a:hover { text-decoration: underline; } adds it back on hover. This small touch works well in menus and navigation lists.

Exercise Remove the underline, restore it on hover

Add two style blocks. First an a type selector with text-decoration: none. Second an a:hover pseudo-class with text-decoration: underline.

Show example solution

/* link underline control */
a {
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

Test yourself

Which value removes the underline?
```
a {
  text-decoration: ?;
}
```
- text-decoration: none
- text-decoration: no-underline
- text-decoration: hidden
- text-decoration: 0
Show answer

text-decoration: none — Correct. text-decoration: none removes the underline.

Remove the underline

a {
  ____;
  color: navy;
}

Show answer

a {
  text-decoration: none;
  color: navy;
}

Match each value to its meaning

none

No line
underline

Line under text
line-through

Strikethrough
overline

Line over text

Next lesson: Summary - Menu bar

We Are Enhancing Your Experience

Cookie Preferences

Strictly Necessary Cookies

Analytical Cookies