text-decoration:none;が効かない

Question

前提・実現したいこと

ホームページ作成の練習をしているのですが、text-decoration:none;で点を消そうとしても消えないです。
なぜ消えないのでしょうか？

該当のソースコード

 <header>
    <nav class="nav">
      <ul>
        <li>
          <a rel="home" href="home.html">Home</a>
        </li>
      </ul>
    </nav>
  </header>

@charset "UTF-8";

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  color: #333;
}

a {
  color: #333;
  text-decoration: none;
}

.nav ul{
  display: flex;
}

試したこと

試しに<li>タグを消すと、点が消えます。でも、ナビゲーションにしたいので<li>タグは消したくありません。

補足情報（FW/ツールのバージョンなど）

macOS

Comments

[int32_t]

「点」というのは、箇条書きの項目の点ですか? 対象ブラウザはどこまで含めますか?

Answer 1

.nav ul li{
  list-style-type:none;
}

<li>は箇条書きの点が付くので上記のコードを追加すると、点を削除できます。

Answer 2

list-style-type: none;を試してみてください。
list-style-type - CSS: カスケーディングスタイルシート | MDN

Answer 3

それはaについた装飾ではなくリスト側のマークです。

ul {
  list-style-type: none;
}

で消えますが、消えたリストマークの分の隙間はこれだけではなくなりません。
paddingで調整してください。

ul {
  list-style: none;
  padding-left: 0;
}

箇条書き関連で図説入りでわかりやすいページがあったので紹介しておきます。
【HTMLで箇条書き】ul・ol・liタグの使い方まとめ｜サルワカ
【HTML&CSS】箇条書きの余白とインデントの調整方法｜サルワカ