Search code examples
csshyperlinkunderline

Remove blue underline from link

I am attempting to have a link show up in white, without an underline. The text color shows up correctly as white, but the blue underline is stubbornly persisting. I tried text-decoration: none; and text-decoration: none !important; in the CSS to remove the link underline. Neither worked. 

.boxhead .otherPage {
  color: #FFFFFF;
  text-decoration: none;
}
<div class="boxhead">
  <h2>
    <span class="thisPage">Current Page</span>
    <a href="myLink"><span class="otherPage">Different Page</span></a>
  </h2>
</div>

How can I remove the blue underline from the link?

Solution

  • You are not applying text-decoration: none; to an anchor (.boxhead a) but to a span element (.boxhead).

    Try this:

    .boxhead a {
    color: #FFFFFF;
    text-decoration: none;
}