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

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)

CodePudding user response：

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

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

<div>
  <a  href="">Link</a>
  <img src="https://via.placeholder.com/150">
  <a href="" >
    <img src="https://via.placeholder.com/150">
  </a>
</div>