CODEWITHSUNDEEP
htmlcsshyperlink
Mitchell van Zuylen
Mitchell van Zuylen

Reputation: 4135

Removing hyperlink underline also removes hyperlink

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

Upvotes: 0

Views: 117

Answers (6)

Alex Jimborean
Alex Jimborean

Reputation: 67

What worked for me was this:

  a, nameofdiv{

color:black;
text-decoration: none;

}

Hope this helps

Upvotes: 0

Harshil Dholakiya
Harshil Dholakiya

Reputation: 105

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>

Upvotes: 0

Pravin Vavadiya
Pravin Vavadiya

Reputation: 3207

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

a.nounderline {text-decoration: none; }

Upvotes: 0

Gerard
Gerard

Reputation: 15786

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.>

Upvotes: 0

Alix Eisenhardt
Alix Eisenhardt

Reputation: 313

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

Upvotes: 0

IiroP
IiroP

Reputation: 1102

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

Upvotes: 3

Related Questions