CSS Image having border-bottom when I don't want to

made a sort-of custom underline in my html site using

a:hover {
 border-bottom: 2px solid red;
}

but this also appears on images with links, how can I stop this. (also if this is a dumb question sorry I’m new)

>Solution :

The cleanest solution would be to apply class to your a tag.

a.simple-link:hover {
 border-bottom: 2px solid red;
}

<div>
  <a class="simple-link" href="">Link</a>
  <img src="https://via.placeholder.com/150">
  <a href="" class="nested-link">
    <img src="https://via.placeholder.com/150">
  </a>
</div>