-2

I'm struggling to get rid of the underline link that appears when you hover over an a element in HTML. I added a style="text-decoration: none" attribute to the a link but when I put the mouse over the text, the underline appears.

I also tried using this CSS:

.nounderline {
  text-decoration: none;
}

.nounderline a:hover {
  text-decoration: none;
}

And then setting the nounderline class on the a link.

Gargoyle
  • 9,590
  • 16
  • 80
  • 145
  • Your second CSS style would work except that you put the .nounderline class on the link, so it should be `a.nounderline:hover`. – clav Jul 26 '18 at 21:40
  • As both the inline style and the first CSS class work, something else must override it, so provide a working sample that reproduce the issue – Asons Jul 26 '18 at 21:46
  • Adding the `!important` to the first one I showed fixed the issue. I'll mark one of the below as the answer when stackoverflow finally lets me. – Gargoyle Jul 26 '18 at 21:47
  • Since using `!important` is a non-recommended way to solve such issue, I suggest you provide a proper sample that reproduce the issue you describe. Also, as the question is written now, it is very unclear and to little use for future users. – Asons Jul 26 '18 at 21:49
  • 2
    Possible duplicate of [How to remove underline from a link in HTML?](https://stackoverflow.com/questions/10853881/how-to-remove-underline-from-a-link-in-html) – sanoj lawrence Jul 26 '18 at 21:50
  • Says who? I think the question is pretty clear on the issue I'm having. Whether or not you think I should *need* the extra flag is immaterial. I doubt I'm the only person that ever inherited a large project and faced an issue like this. It's not always simle to make a tiny sample when something odd is going on. – Gargoyle Jul 26 '18 at 21:52
  • 2
    I guess you need to read SO guidelines again on [ask]...this one in particular: [mcve] – Asons Jul 26 '18 at 21:54
  • 1
    @Gargoyle there are lots of post related to your issue, do a search before asking a question, https://stackoverflow.com/questions/2041388/how-to-remove-the-underline-for-anchorslinks – sanoj lawrence Jul 26 '18 at 21:56
  • Adding `!important` will fix the problem, but using this declaration is not the best and nicest way to fix the problem. It can cause overwrite problems when you want to add an underline in a later stadium on another `a` tag. You could find out what te css selector path is which causes the underline. Because a deeper selector will overwrite the css of just one selector. Look at this image to fully understand the priorities in CSS: http://www.standardista.com/wp-content/uploads/2012/01/specificityimg.png – Dennis Jul 26 '18 at 21:57
  • And also note, SO is not someone's personal debugger service, it is a QA where every question (and answer) is suppose to provide help for the community as a whole, hence they need a certain quality to do so, and your's as it is now, does not. – Asons Jul 26 '18 at 22:07

3 Answers3

0

If you add an !important after none in your css, the underline should be gone. Well, it will be gone if you are using just html and css, and your css is linked correctly.

user9211044
  • 27
  • 4
-1

You should do like

<a href="" class="nounderline">Text</a>

here css goes

.nounderline{text-decoration:none;}

Further, if you want that underline on all a tag should be removed then add in css

a{text-decoration:none;}

Update: I have removed !important. If you are trying to overwrite the property then maybe you need to add that.

Naveed Ramzan
  • 3,565
  • 3
  • 25
  • 30
-2
Working example and a thumbs down? How is that possible? lol


.nounderline{
text-decoration: none
}

.nounderline:hover{
text-decoration: none
}
<a class="nounderline" href="http://example.com">Link</a>
norcal johnny
  • 2,050
  • 2
  • 13
  • 17
  • Somebody is just randomly downvoting all of these. Your example is the same as mine though, which doesn't work. I needed the `!important` flag on there as something else must have been conflicting. – Gargoyle Jul 26 '18 at 21:48
  • 1
    I gave it thumbs up : ) –  Jul 26 '18 at 21:48
  • if you had to use the !Important that means you have code after your code cancelling it out. – norcal johnny Jul 26 '18 at 21:50