Skip to content
Home » Web » CSS » Why "text-decoration: none" Does Not Work

Why "text-decoration: none" Does Not Work

text-decoration: none

Assuming that you have a hyperlink wrapped by a <div> block like the following, and you want to remove the underline of the hyperlink.

<div class='google_link_div'>
  <a href='//www.google.com/'>Go to Google</a>
</div>

A common mistake you might make is to add text-decoration: none; directly under the outside <div> like this:

.google_link_div {
  ...
  text-decoration: none;
}

This does not work.

Solution

To remove the underlines from links, you must set text-decoration to none under <a> (Anchor tag) to suppress the default style.

.google_link_div a {
  ...
  text-decoration: none;
}

Or for all hyperlinks:

a {
  ...
  text-decoration: none;
}

Leave a Reply

Your email address will not be published. Required fields are marked *