リンクでテキストだけに下線を引く方法

こんにちは。今日は「リンクでテキストだけに下線を引く方法」について書きます！

言葉だけでは分かりづらいので、画像を貼りますね。

ナビのHTMLなのですがデザイン上はテキストのみに下線が引かれており、数字には引かれていません。
デザイン通りにテキストのみを<a>タグで囲えば簡単ですが、そうすると数字をクリックしても反応せず利便性が落ちてしまいます。（クリック領域が減る）

なので今回は数字ごと<a>タグで囲った上でテキストのみに下線を引く方法をとります＾＾
また、ホバーした際にはちゃんと下線が消えるようにします。

ではさっそく見ていきましょう^ – ^

コーディング

HTML

           <ul class="itemList">
            <li>
              <a href="#">
                <div class="tit"><span class="num">01</span><span class="txt">リストリスト</span></div>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="tit"><span class="num">02</span><span class="txt">リストリスト</span></div>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="tit"><span class="num">03</span><span class="txt">リストリスト</span></div>
              </a>
            </li>
            <li>
              <a href="#">
                <div class="tit"><span class="num">04</span><span class="txt">リストリスト</span></div>
              </a>
            </li>
          </ul>

CSS

.itemList {
  display: flex;
  flex-wrap: wrap;
  max-width: 500px;
  margin: -20px 0 0;
}

.itemList li {
  box-sizing: border-box;
  width: 50%;
  margin-top: 20px;
  padding-right: 1em;
}

.itemList a {
  text-decoration: none;
}

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

.itemList .num {
  font-weight: bold;
  margin-right: .5em;
}

.itemList .tit {
  display: inline-block;
}

.itemList .txt {
  text-decoration: underline;
}

少しポイントを解説します！

私的におっ？と思ったのは、【.txt】にtext-decorationプロパティを使ったことです。

私はつい先入観で<a>タグにしかtext-decorationプロパティは使わないものだと思っていましたが、そうではなくてただ単に<a>タグの初期値としてついているだけなんですよね〜！

このコードを理解したことによって少し頭が柔軟になった気がします笑

では今日はここまで〜〜