CSS 文字の下線が消えない！？

cssの

text-decoration: none;

が効かない事があったので対処法をまとめてみました。
以下経緯です。

---

①最初のコード

index.html

<div class="under-line">
  <a href="[リンク先のURL]">
    <span>下線を消してみる</span>
  </a>
</div>

styles.css

.under-line {
    font-size: 20px;
    text-decoration: none;
}

一番上の親要素に適応させればいいのでは？と思い書いたもの。
結果は

消えませんでした。

---

②変更後のコード (index.htmlは変更してません)

styles.css

.under-line {
    font-size: 20px;
}  

.under-line a {
    text-decoration: none;
}

＜a＞要素に適応させてみました。

消えました。