CSS图像在我不想时具有边框底部

Question

使用在我的html网站中创建了一种自定义下划线

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

但这也出现在带有链接的图像上，我该如何阻止它。(如果这是一个愚蠢的问题，对不起，我是新来的(

Answer 1

最干净的解决方案是将类应用于a标记。

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>