Removing an underline from a link in css

Question

I've been trying to remove an ugly underline from a webpage but for some reason it just won't go away.

I've tried using text-decoration:none; and color: #FFFFFF; to no avail.

Original css:

#noday {
    color: #ECECEC;
    font-family: "Times New Roman",Times,serif;
    font-size: 1em;
}

The snippet of code:

<a href="http://www.example.com/content/" target"_blank"><div id="noday"><br><br>Random text here</div></a>

Real example: http://jsfiddle.net/c0c6g4rd/

I've looked at: Remove stubborn underline from link but it hasn't helped :/

score 16 · Accepted Answer · answered Oct 19 '14 at 23:42

16

Just add text-decoration:none; to a tag for #noneall:

#noneall a{
    text-decoration:none;
}

Here is a jsfiddle.

answered Oct 19 '14 at 23:42

Henrik Petterson

6,862
20
71
155

1

Or more generally `a { text-decoration: none; }` – mcont Nov 02 '14 at 18:06

score 2 · Answer 2 · answered Oct 19 '14 at 23:43

Try this, add a id(or class) to your a href

<a href="http://www.example.com/content/" id="thisLink" target"_blank">Random text here</a>

and add this to your css file:

#thisLink{
    text-decoration: none;
}

This should remove the underline!

Here a Jsfiddle of that:

http://jsfiddle.net/c0c6g4rd/4/

score 2 · Answer 3 · answered Oct 19 '14 at 23:48

2

Add at the beginning of your css file:

a{
 text-decoration:none;
}

With these lines you will remove this underline from all links in your html.

answered Oct 19 '14 at 23:48

Héctor

509
2
7

score 0 · Answer 4 · edited Jul 28 '23 at 09:59

0

Just to make sure, try adding a !important after your text-decoration: none:

a{text-decoration: none !important}

If that does work, then there is a hierarchy problem and something else is overriding your declaration. Also try putting your declaration at the END of your CSS to override any other declarations.

edited Jul 28 '23 at 09:59

Matthieu

2,736
4
57
87

answered Oct 20 '14 at 00:23

Matt

26
2

score 0 · Answer 5 · answered Oct 20 '14 at 00:44

The root of this problem is that you can't put a div (a block-level element) inside an a (an inline element. However, there are better ways of doing what you're trying to do.

As the others said, this will apply to all links:

a { text-decoration: none; }

However, if you only want to apply it to that one link, add the id to the a like this rather than using another element:

<a ... id="noday">...</a>

Then style the same way.

Fiddles of examples:

http://jsfiddle.net/9gsu9ok3/ (Style all links)

http://jsfiddle.net/9gsu9ok3/3/ (Style only certain links)

Hope this helps.

Removing an underline from a link in css

Real example: http://jsfiddle.net/c0c6g4rd/

5 Answers5

Linked