How to remove the underlining links in html?

How to remove the underlining links in html?
0

#1

how to remove the underlining links in html ? Command text-decoration is not work.
a{
color: white;
font-family: Lobster;
font-size: 25px;
position: relative; left: 900px; top: -10px;
text-decoration: none;
}


#2

Your text decoration is not the problem - see this very simple pen: http://codepen.io/Malgalin/pen/QEzNyA?editors=1100

It must be something else. Do you have a codepen link?


#3

I’m new in htmll/css. I don’t now how create it.


#4

Hi, @SerafimPoch. That’s weird. text-decoration: none; should kill the underline.


#5

It’s just the editor I used to demonstrate the html and css above. It’s a very common tool for demonstrating code :slight_smile:

Sorry, I always assume everyone is working in codepen :slight_smile:

When you say text decorate isn’t working, what do you mean? Are all your links still underlined? or are there specific times when it seems to act differently to your expectation?


#6

This codepen link.


#7

Looks like bootstrap is messing with your link. Try adding this to your CSS.

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


#8

The bootstrap <link> has to go before any of your custom CSS <link>s, so your CSS overrides any bootstrap CSS rule (including the link underline).

<link ... href="...bootstrap.css">
<link ... href="custom.css">

Also, Bootstrap underlines links (and changes their color) when you hover on them. You can specify

a:hover {
  color: <some-other-color-if-you-want>;
  text-decoration: none;
}

to override that if you want to.


#9

Thanks. It works without bootstrap.


#10

As I’ve looked through your code, I noticed a few things that I’d just like to bring your attention to hopefully prevent some hair pulling out in other projects later. It looks like you’re creating the page outside of CodePen then copying and pasting from there into the Pen.

Basically the way CodePen works is they have already created the <head> section of the document which has been hidden from us. What you’re actually entering into the HTML section is what goes between the <body> tags on a page. The CSS section of the pen is added to the hidden head section which means if you add a link to the bootstrap API in the HTML section then it will override any changes you made in the CSS section. The best way to add the links to your pen, like Bootstrap, is to add them in the “Quick Add” section under the CSS settings. This places the link in the correct location so that your custom CSS will override the bootstrap defaults.

As for the CSS section, when it loaded, the definition for the <a> tag looked like this:
.a {
font-size: 25px;
font-family: Lobster;
color: white;
text-decoration: none;
}

If you notice, you placed a dot(.) before the a. This tells the site that it’s looking for a class name “a” instead of the <a> tag. You will need to remove the dot(.) for the CSS to correctly style the anchor links on your page. As noted above by @kevcomedia, you will also need to add the pseudo-class of a:hover to remove the underline when the mouse cursor is on the link.