Text-Decoration: none Not working for links?

Question

text-decoration: none; Is not working... My browser is Chrome, and the code is below:

.hotbar li {
  float: right;
  display: inline-block;
  color: red;
  margin: 0 50px;
  text-decoration: none;
}

<nav class="hotbar">
  <ul>
    <li> <a href="http://127.0.0.1:64310/about.html" target="_blank">About</a></li>
    <li> <a href="http://127.0.0.1:64310/platforms.html" target="_blank">Platforms</a></li>
    <li> <a href="http://127.0.0.1:64310/contact.html" target="_blank">Contact</a></li>
  </ul>
</nav>

You need to target the `a` tag, not the `li`. Try `.hotbar li a {`. — gen_Eric, May 14 '21 at 18:25

score 4 · Answer 1 · answered May 14 '21 at 18:25

4

You need to remove the text-decoration from the anchor. So change your selector to .hotbar li a

.hotbar li a {
  float: right;
  display: inline-block;
  color: red;
  margin: 0 50px;
  text-decoration: none;
}

<nav class="hotbar">
  <ul>
    <li> <a href="http://127.0.0.1:64310/about.html" target="_blank">About
                        </a></li>
    <li> <a href="http://127.0.0.1:64310/platforms.html" target="_blank">Platforms
                        </a></li>
    <li> <a href="http://127.0.0.1:64310/contact.html" target="_blank">Contact
                        </a></li>
  </ul>
</nav>

answered May 14 '21 at 18:25

j08691

204,283
31
260
272

Really worth an answer? Comment and delete is enough I would think – mplungjan May 14 '21 at 18:28
Yes. I suggest you delete it and let OP delete their question based on the comment under the question. I voted to typo-type close this – mplungjan May 14 '21 at 18:30
1

@mplungjan But it's not a typo. A typo would be something like `div > p > imag` – j08691 May 14 '21 at 18:31
1

It is a typo-TYPE- SO decided to make it discussable what is a typo. There was a missng "a" and that is the solution and that was commented on the question and then it can be closed since OP has an answer and there are hundred of dupes and it is not useful to anyone but the asker – mplungjan May 14 '21 at 18:33
1

It wasn’t a typo. It is an error in the logic. – Dan Mullin May 14 '21 at 18:34
[Dupe](https://stackoverflow.com/questions/25092666/text-decoration-none-not-working-on-ul) – mplungjan May 14 '21 at 18:34
[Dupe](https://stackoverflow.com/questions/42164673/html-css-text-decoration-does-not-work) – mplungjan May 14 '21 at 18:36
[Dupe](https://stackoverflow.com/questions/60937444/text-decoration-none-important-not-working) – mplungjan May 14 '21 at 18:36

score 1 · Answer 2 · answered May 14 '21 at 18:26

1

You need to apply it to the anchor tag, not the list item.

.hotbar li a {text-decoration: none;}

answered May 14 '21 at 18:26

Dan Mullin

4,285
2
18
34

Really worth an answer? Comment and delete is enough I would think. AND vote to close – mplungjan May 14 '21 at 18:28

Text-Decoration: none Not working for links?

2 Answers2