Remove blue underline from link

Question

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?

Well it should go away when you do text-decoration:none. Are you sure you are appling this to the right element? Can you provide example code? — Davor Lucic, May 07 '10 at 15:33

score 980 · Accepted Answer · edited Jul 20 '20 at 09:40

980

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

edited Jul 20 '20 at 09:40

Andrés Mejía

559
6
15

answered May 07 '10 at 15:50

Davor Lucic

28,970
8
66
76

14

But what if you have text *surrounding* the span as well, and you want the surrounding text to have the link underline, but the text within the span to have none? – JMTyler Jul 15 '10 at 20:30
@JMTyler you can't have partial underlines like that, but I guess you could apply border on text inside of span. – Davor Lucic Jul 15 '10 at 20:50
Would it make a difference if it is a div? And how exactly would applying a border cause the underline to appear gone? – JMTyler Jul 15 '10 at 21:02
5

@rebus, You can't? Why not? Cause in at least IE7+ and FireFox 4+ you can, but not in Chrome for some reason. Here's the code I got to work in the non-Chrome browsers I tested: `.toc-list a > span{text-decoration:none !important;}` I think @JMTyler's question is legitimate; I am searching for the same solution. – Tony Topper Oct 10 '11 at 16:23
Twitter did the same with the message page you can see that the name has underline but not the tag – Aysennoussi Sep 07 '14 at 11:10
13

It appears `text-decoration` doesn't support overriding on nested tags, as hinted above. Once you have an `a { text-decoration: underline; }` rule applied you *cannot* de-apply it eg with `a .wish_this_were_not_underlined { text-decoration: none; }`. I can't find a reference for this but that's my experience (in Chrome). – Partly Cloudy Jan 18 '17 at 16:32
2

Like others above I was not able to de-underline the text by applying `text-decoration: none;` so instead we chose to hide the line using `text-decoration: underline; text-decoration-color: white;`. /hack – Ryan Burbidge Jan 09 '18 at 22:26
Better yet, try `.hidden-underline { text-decoration-color: #00000000; }` to set the underline color to transparent (0 alpha). Mind, it is not widely supported as of today (Edge, looking at you). – Magnus Bull Nov 01 '18 at 18:39
3

if you're only trying to remove the underline from an element inside an anchor, and not the entire anchor. you need to make the inner element an inline-block like so: `.boxhead .otherPage { display: inline-block; color: #FFFFFF; text-decoration: none; }` – Patrick Denny Oct 30 '19 at 18:28

JYelton · Answer 2 · 2016-05-02T17:32:56.037

269

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.

edited May 02 '16 at 17:32

answered May 07 '10 at 15:35

JYelton

35,664
27
132
191

5

I think you mean `a:link` when you say `a:click` – artlung May 07 '10 at 15:44
9

This should be the actual accepted answer, as I was having the same problem AFTER clicking on my button link. The visited property was still changing to purple when I came back to the page. – Doresoom Jan 07 '16 at 01:10

score 36 · Answer 3 · edited Jul 17 '14 at 14:02

36

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)

edited Jul 17 '14 at 14:02

Gijs Overvliet

2,643
3
28
35

answered May 07 '10 at 15:35

Alex K.

171,639
30
264
288

7

Setting `border-bottom-style: none;` fixed it for me. – agentofuser Jul 19 '18 at 04:56

score 32 · Answer 4 · edited Mar 07 '14 at 17:24

32

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

edited Mar 07 '14 at 17:24

Idris

997
2
10
27

answered Dec 11 '13 at 05:52

Nagarajan S R

1,418
2
19
31

score 21 · Answer 5 · edited Feb 12 '23 at 18:48

21

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

edited Feb 12 '23 at 18:48

riddle_me_this

8,575
10
55
80

answered Mar 11 '17 at 22:58

jeffmjack

572
4
14

1

This one should be the answer.. Sometimes, box shadow gives an underline affect. – Bhargav Oct 29 '17 at 02:11
It is an answer, but not the best. The scope of those are global and not specific. Something like this should do the trick: `.otherPage a:link {text-decoration:none;}`; repeat that for visited, active and hover if needed. – Ajowi Apr 15 '20 at 14:40

score 16 · Answer 6 · edited Dec 10 '22 at 23:40

16

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

edited Dec 10 '22 at 23:40

Peter Mortensen

30,738
21
105
131

answered Jan 19 '17 at 12:50

Santosh Khalse

12,002
3
36
36

score 11 · Answer 7 · edited Dec 10 '22 at 23:37

11

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.

edited Dec 10 '22 at 23:37

Peter Mortensen

30,738
21
105
131

answered May 07 '10 at 20:30

Joel Crawford-Smith

494
5
14

https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration-color – snarf Jul 06 '20 at 17:10

score 9 · Answer 8 · edited Dec 10 '22 at 23:34

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.

score 5 · Answer 9 · answered Nov 25 '19 at 12:54

5

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

answered Nov 25 '19 at 12:54

itzhar

12,743
6
56
63

score 4 · Answer 10 · edited Dec 10 '22 at 23:45

4

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!

edited Dec 10 '22 at 23:45

Peter Mortensen

30,738
21
105
131

answered Jun 30 '17 at 18:23

yarz-tech

284
2
6
18

make sure its on the anchor tag and inline could be better since you might want the underline on other links. – Asuquo12 Jun 18 '19 at 14:56

score 3 · Answer 11 · edited Dec 11 '22 at 00:29

3

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.

edited Dec 11 '22 at 00:29

Peter Mortensen

30,738
21
105
131

answered Jul 12 '18 at 04:22

Neo

755
1
10
24

[Example 1](https://developer.mozilla.org/en-US/docs/Web/CSS/:any-link) (MDN) and [example 2](https://stackoverflow.com/questions/35303995/cannot-override-webkit-any-link) (Stack Overflow) of using "`a:-webkit-any-link {`". – Peter Mortensen Dec 11 '22 at 00:25

score 2 · Answer 12 · edited Dec 10 '22 at 23:59

2

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

edited Dec 10 '22 at 23:59

Peter Mortensen

30,738
21
105
131

answered Jun 22 '18 at 19:50

Md Abul Bashar

75
2
12

score 2 · Answer 13 · edited Dec 11 '22 at 00:32

2

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;

edited Dec 11 '22 at 00:32

Peter Mortensen

30,738
21
105
131

answered Apr 07 '20 at 16:04

Ben

1,853
19
20

score 2 · Answer 14 · answered Jan 28 '23 at 17:10

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>

score 1 · Answer 15 · edited Dec 10 '22 at 23:39

1

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.

edited Dec 10 '22 at 23:39

Peter Mortensen

30,738
21
105
131

answered Sep 22 '16 at 09:11

MK Sandhu

21
1

score 1 · Answer 16 · edited Dec 10 '22 at 23:55

1

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

edited Dec 10 '22 at 23:55

Peter Mortensen

30,738
21
105
131

answered Jun 12 '18 at 01:09

Deke

4,451
4
44
65

How exactly? Can you elaborate? E.g., by providing an example? – Peter Mortensen Dec 10 '22 at 23:56

score 1 · Answer 17 · edited Dec 11 '22 at 00:38

1

In my reset, the CSS usually is:

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

edited Dec 11 '22 at 00:38

Peter Mortensen

30,738
21
105
131

answered Dec 10 '22 at 09:55

Flavio Oliveira

381
4
12

score 0 · Answer 18 · answered Jun 26 '19 at 17:58

0

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

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

answered Jun 26 '19 at 17:58

qarly_blue

380
3
7

score 0 · Answer 19 · answered Jul 10 '19 at 22:48

0

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

answered Jul 10 '19 at 22:48

mwilcox

4,065
23
20

score 0 · Answer 20 · edited Dec 11 '22 at 00:33

0

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

edited Dec 11 '22 at 00:33

Peter Mortensen

30,738
21
105
131

answered Jul 04 '20 at 15:03

Rafiq

8,987
4
35
35

score 0 · Answer 21 · edited Dec 11 '22 at 00:36

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

score -1 · Answer 22 · edited Dec 10 '22 at 23:44

-1

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;")

edited Dec 10 '22 at 23:44

Peter Mortensen

30,738
21
105
131

answered Mar 08 '17 at 16:21

JoshYates1980

3,476
2
36
57

Remove blue underline from link

22 Answers22

Update 2023

Linked

Related