我正试图实现对图像悬停链接和图像的基础.
以下是试图实现的目标:
The issue是当我在元素上悬停时，我看到两条线，但在悬停链接和图像时应该是一条线，而且在调整窗口大小期间有两条下划线可见，并且不稳定. 也许有更好的方法来处理这件事？
以下是我的代码:
.lnk-underline {
text-decoration: none; /* Remove default underline for text */
position: relative;
display: inline-block;
}
.lnk-underline::before {
content: "";
position: absolute;
left: 0;
bottom: -1.5px;
width: 100%;
height: 2px;
background: #D0191D;
}
.underline-hover {
text-decoration: none;
position: relative;
display: inline-block;
}
.underline-hover::before {
content: "";
position: absolute;
left: 0;
bottom: -1.5px;
width: 100%;
height: 2px;
background: #D0191D;
transform: scaleX(0);
transform-origin: bottom;
transition: transform 0.3s ease-in-out;
}
.underline-hover:hover::before {
transform: scaleX(1);
}
/* Remove underline from lnk-underline for downloadLink on hover */
.lnk-underline:hover {
text-decoration: none;
}<div class="underline-hover">
<a href="@Url" class="lnk-underline" id="downloadLink">
Download
</a>
<a href="@Url" id="iconDownload">
<img src="/icons/download.svg" />
</a>
</div>