行全体をリンクにした際、行内の文字に下線が入らないようにしたい

Question

bootstrap3です。

<tr>タグにclass="position-relative"を追加、 <a>タグにclass="stretched-link"を追加し 行全体をリンクにしました。

<tbody class="text-center">
      
          <tr class="position-relative">
            <td>
              <div data-turbolinks="false">
                <a href="/rooms/1" class="stretched-link">
                  <p><img id="avatar_img" src="/assets/no_avatar-bf76286f0f682b39363997ce256de799f1fd04352645380be28a8a854014c157.jpg" /></p>
                  <p>松尾 玲奈</p>
                    <p>あなた 宜しくお願いします。 2020/09/17 12:32</p>
                </a>
              </div>
            </td>
        　</tr>
          <tr class="position-relative">
            <td>
              <div data-turbolinks="false">
                <a href="/rooms/2" class="stretched-link">
                  <p><img id="avatar_img" src="/assets/no_avatar-bf76286f0f682b39363997ce256de799f1fd04352645380be28a8a854014c157.jpg" /></p>
                  <p>増田 悠真</p>
                    <p>あなた 初めまして。今回はどうぞ宜しくお願いします！ 2020/09/17 12:32</p>
                </a>
              </div>
            </td>
        　</tr>
          <tr class="position-relative">
            <td>
              <div data-turbolinks="false">
                <a href="/rooms/3" class="stretched-link">
                  <p><img id="avatar_img" src="/assets/no_avatar-bf76286f0f682b39363997ce256de799f1fd04352645380be28a8a854014c157.jpg" /></p>
                  <p>近藤 悠人</p>
                </a>
              </div>
            </td>
        　</tr>
      
    </tbody>

この時、行にカーソルが当たると、余白(文章上で無い)にも関わらず文章に下線が付きます。

これが不要なのですが、
何かbootstrapへの指定が間違ってたでしょうか？

下線を表示させなく出来ますでしょうか？

分かる方教えて下さい。宜しくお願いします。

Answer 1

Bootstrapではaタグに対してtext-decoration: underline;と設定されているため下線が表示されます。下記のCSSを追記すると解決すると思います。

リンクの下線を消す方法

a, 
a:visited, 
a:focus,
a:hover {
   text-decoration: none;
}

Comments

[pecchan]

なるほど、そうことだったんですね！
有難う御座います！