CODEWITHSUNDEEP
htmlcss
hypern00b
hypern00b

Reputation: 53

CSS cant stop underlining

Hello I'm having trouble with stop the underlining on my hyperlink in HTML. I added in CSS text-decoration:none; but that doesnt seem to work, any suggestions?

header.main h1 {
  margin-bottom: 2rem;
  font-size: 55px;
  color: #FFFFFF;
  text-decoration: none;
}

header.main h2 {
  margin-bottom: 2rem;
  color: #FFFFFF;
  text-decoration: none;
}
<header class="main">
  <a href="./index.html">
    <h1>Test.com</h1>
    <h2>This is a test</h2>
  </a>
</header>

Upvotes: 1

Views: 70

Answers (4)

Aonghas M
Aonghas M

Reputation: 2101

This is a result of the a tag which usually has an underline applied to it as a default in most browsers and frameworks. Simply apply text-decoration: none; to your a tag to solve the issue. Here is a jsfiddle with an example: https://jsfiddle.net/dqpgacmt/

The best way to track these kind of things down is with the developer tools in your browser. They allow you to examine the HTML markup and the CSS being applied to it.

Upvotes: 1

Глеб Шалтаев
Глеб Шалтаев

Reputation: 11

If you look in the chrome code inspector (default key to call: CMD+Option+i for MacOS; ctrl+alt+I or F12 for Windows and Linux), you'll see that the browser has calculated text-decorated: none; for <h1>. And the underline came from <a>.

To fix this use:

header.main a {
  text-decoration: none;
}

Upvotes: 1

mbrandau
mbrandau

Reputation: 554

The a probably is your problem.

Try the following:

header.main a { text-decoration: none; }

Upvotes: 2

Gerardo BLANCO
Gerardo BLANCO

Reputation: 5648

The underline came from the <a> tag not from th <h2> tag. Just add text-decoration: none to the <a> tag.

Hope this helps

header.main h1 {
  margin-bottom: 2rem;
  font-size: 55px;
  color: #FFFFFF;
}

header.main h2 {
  margin-bottom: 2rem;
  color: #FFFFFF;
}

a {  text-decoration: none;}
<header class="main">
  <a href="./index.html">
    <h1>Test.com</h1>
    <h2>This is a test</h2>
  </a>
</header>

Upvotes: 1

Related Questions