Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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?

like image 641
dmr Avatar asked May 07 '10 15:05

dmr


People also ask

How do I remove the underline from hyperlink color?

To remove the underline, switch back to the HTML tab, and add text-decoration:none to the style tag after the semi-colon of the color value we just added.

How do I make an HTML link not underlined?

You can do so anywhere in the <body></body> tag to make the link not have an underline. Defining a style property this way is called inline styling. The style is specified "inline," in the element itself, in the body of your page.


2 Answers

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;
}
like image 152
Davor Lucic Avatar answered Oct 22 '22 11:10

Davor Lucic


The anchor tag (link) also has pseudo-classes such as visited, hover, link and active. Make sure your style is applied to the state(s) in question and that no other styles are conflicting.

For example:

a:hover, a:visited, a:link, a:active
{
    text-decoration: none;
}

See W3.org for more information on user action pseudo-classes :hover, :active, and :focus.

like image 259
JYelton Avatar answered Oct 22 '22 11:10

JYelton