Removing hyperlink underline also removes hyperlink

Question

I import fontawesome icons.

<script src="https://use.fontawesome.com/e5d9dacb14.js"></script>

Next, I have a hyperlink:

<a href="https://google.nl"> <i class="fa fa-user-o" ></i> Personal Page </a> 

This hyperlink has the annoying underline, which I try to remove by following this answer.

To do so, I add this to my css.

a.nounderline {text-decoration: none; }

And I change the hyperlink to:

<a.nounderline href="https://google.nl"> <i class="fa fa-user-o" ></i> Personal Page </a.> 

Now. This does remove the underline, but it also removed the hyperlink. See my jsfiddle

Answer 1

If you want to add class to your tag, add it by class="nounderline"

a.nounderline {
  text-decoration: none;
}

<a class="nounderline" href="https://google.nl"> <i class="fa fa-user-o"></i> Personal Page </a>

Read more about html classes and .class selector

Answer 2

a.noundeline represents an a that has nounderline for class.
So you have to create a <a class="nounderline"> tag to make it work.

Answer 3

Please see below. You need to define .nounderline as a class in CSS.

.nounderline {
  text-decoration: none;
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<a class="nounderline" href="https://google.nl"> <i class="fa fa-user-o"></i> Personal Page </a.>

Answer 4

You can Use text-decoration: none; css style for Anchor tag. like below

a.nounderline {text-decoration: none; }

Answer 5

you have attached class name with HTML<a> tag that is wrong.

what you need to do is just add class property to your<a>tag like this:

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

<a class="nounderline" href="https://google.nl"> <i class="fa fa-user-o" ></i> Personal Page </a> 

Answer 6

What worked for me was this:

  a, nameofdiv{

color:black;
text-decoration: none;

}

Hope this helps