CODEWITHSUNDEEP
csshyperlinkunderline
dmr
dmr

Reputation: 22323

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?

Upvotes: 725

Views: 1433604

Answers (22)

jeffmjack
jeffmjack

Reputation: 642

Sometimes you're seeing a box shadow, not a text underline.

Try this (using whatever CSS selectors are appropriate for you):

a:hover, a:visited, a:link, a:active {
  text-decoration: none !important;
  -webkit-box-shadow: none !important;
  box-shadow: none !important;
}

Upvotes: 21

Maik Lowrey
Maik Lowrey

Reputation: 17546

Update 2023

The question is already a bit older. Since a while you can delete all features of a tag with all: unset in CSS.

.w {
  font-size: 1.4rem;
}

.w .s2 a, .w .s3 a {
  all: unset;
}

.w .s3 a {
  color: magenta;
}
<div class="w">
  <div class="s1">
    <a href="">link A</a>
  </div>
  
  <div class="s2">
    <a href="">link B</a>
  </div>  
  
  <div class="s3">
    <a href="">link C</a>
  </div>    
</div>

Upvotes: 3

Flavio Oliveira
Flavio Oliveira

Reputation: 419

In my reset, the CSS usually is:

a {
  cursor: pointer;
  text-decoration: none !important;
  color: inherit;
}

Upvotes: 2

Venteens Productions
Venteens Productions

Reputation: 97

Overriding nested text-decoration styles.

Look for any ::before or ::after selectors and display none to any text-decoration, border-bottom, etc. or reset a property (unset) to any text color property like: text-decoration-color, background-color, etc.

.boxhead .otherPage {
    color: #FFFFFF;
}

a.boxhead .otherPage:before {
    background-color: unset;
}

or

a.boxhead .otherPage:before {
    background-color: unset !important;
}

Upvotes: 0

Rafiq
Rafiq

Reputation: 11445

Set text-decoration: none; for the anchor tag.

Example HTML.

<body>
    <ul class="nav-tabs">
        <li><a href="#"><i class="fas fa-th"></i>Business</a></li>
        <li><a href="#"><i class="fas fa-th"></i>Expertise</a></li>
        <li><a href="#"><i class="fas fa-th"></i>Quality</a></li>
    </ul>
</body>

Example CSS:

.nav-tabs li a{
  text-decoration: none;
}

Upvotes: 0

Ben
Ben

Reputation: 2023

As others pointed out, it seems like you can't override nested text-decoration styles... But you can change the text-decoration-color.

As a hack, I changed the color to be transparent:

    text-decoration-color: transparent;

Upvotes: 2

Neo
Neo

Reputation: 817

None of the answers worked for me. In my case there was a standard

a:-webkit-any-link {
    text-decoration: underline;

in my code. Basically whatever link it is, the text color goes blue, and the link stays whatever it is.

So I added the code at the end of the header like this:

<head>
  </style>
    a:-webkit-any-link {
      text-decoration: none;
    }
  </style>
</head>

And the problem is no more.

Upvotes: 3

Md Abul Bashar
Md Abul Bashar

Reputation: 85

You've used text-decoration: none in the wrong selector. You need to check which tag do you need for decoration none.

You may use this code

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

Or

.boxhead a {
    text-decoration: none !important;
}

Or

a {
    text-decoration: none !important;
}

Upvotes: 2

Deke
Deke

Reputation: 4639

If text-decoration: none or border: 0 doesn't work, try applying inline style in your HTML content.

Upvotes: 1

yarz-tech
yarz-tech

Reputation: 274

While the other answers are correct, there is an easy way to get rid of the underline on all those pesky links:

a {
   text-decoration: none;
}

This will remove the underline from every single link on your page!

Upvotes: 4

JoshYates1980
JoshYates1980

Reputation: 3626

Here is an example for the ASP.NET Web Forms LinkButton control:

 <asp:LinkButton ID="lbmmr1" runat="server" ForeColor="Blue" />

Code-behind:

 lbmmr1.Attributes.Add("style", "text-decoration: none;")

Upvotes: -1

Santosh Khalse
Santosh Khalse

Reputation: 12700

You missed text-decoration:none for the anchor tag. So the code should be the following.

.boxhead a {
    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>

More standard properties for text-decoration

Enter image description here

Upvotes: 17

MK Sandhu
MK Sandhu

Reputation: 21

Just use the property

border: 0;

and you are covered. It worked perfectly for me when the text-decoration property didn’t work at all.

Upvotes: 1

Joel Crawford-Smith
Joel Crawford-Smith

Reputation: 494

As a rule, if your "underline" is not the same color as your text (and the 'color:' is not overridden inline), it is not coming from "text-decoration:". It has to be "border-bottom:".

Don't forget to take the border off your pseudo classes too!

a, a:link, a:visited, a:active, a:hover {border:0!important;}

This snippet assumes it's on an anchor. Change to its wrapper accordingly... And use specificity instead of "!important" after you track down the root cause.

Upvotes: 11

artlung
artlung

Reputation: 34003

Without seeing the page, it is hard to speculate.

But it sounds to me like you may have a border-bottom: 1px solid blue; being applied. Perhaps add border: none;. text-decoration: none !important is right; it's possible that you have another style that is still overriding that CSS though.

This is where using the Firefox Web Developer Toolbar is awesome. You can edit the CSS right there and see if things work, at least for Firefox. It's under CSS → Edit CSS.

Upvotes: 9

Davor Lucic
Davor Lucic

Reputation: 29380

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;
}

Upvotes: 991

itzhar
itzhar

Reputation: 13031

  a {
    color: unset;
    text-decoration: unset;
  }

Upvotes: 5

mwilcox
mwilcox

Reputation: 4132

In my case, I had poorly formed HTML. The link was within a <u> tag, and not a <ul> tag.

Upvotes: 0

qarly_blue
qarly_blue

Reputation: 420

Put the following HTML code before the <BODY> tag:

<STYLE>A {text-decoration: none;} </STYLE>

Upvotes: 0

JYelton
JYelton

Reputation: 36512

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.

Upvotes: 272

Alex K.
Alex K.

Reputation: 175748

text-decoration: none !important should remove it .. Are you sure there isn't a border-bottom: 1px solid lurking about? (Trace the computed style in Firebug/F12 in IE)

Upvotes: 36

Nagarajan S R
Nagarajan S R

Reputation: 1436

Just add this attribute to your anchor tag

style="text-decoration:none;"

Example:

<a href="page.html"  style="text-decoration:none;"></a>

Or use the CSS way. 

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

Upvotes: 32

Related Questions