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