I am making an attempt to implement underlying on picture on hover hyperlink and picture.
Here’s what attempt to obtain:
The difficulty is after I hover on factor I see two traces however needs to be one on hover each hyperlink and picture, additionally two underlines are seen throughout window resizing and usually are not secure.
Perhaps there’s a higher option to deal with that?
Right here is my code:
.lnk-underline {
text-decoration: none; /* Take away default underline for textual content */
place: relative;
show: inline-block;
}
.lnk-underline::earlier than {
content material: "";
place: absolute;
left: 0;
backside: -1.5px;
width: 100%;
top: 2px;
background: #D0191D;
}
.underline-hover {
text-decoration: none;
place: relative;
show: inline-block;
}
.underline-hover::earlier than {
content material: "";
place: absolute;
left: 0;
backside: -1.5px;
width: 100%;
top: 2px;
background: #D0191D;
rework: scaleX(0);
transform-origin: backside;
transition: rework 0.3s ease-in-out;
}
.underline-hover:hover::earlier than {
rework: scaleX(1);
}
/* Take away underline from lnk-underline for downloadLink on hover */
.lnk-underline:hover {
text-decoration: none;
}<div class="underline-hover">
<a href="https://stackoverflow.com/questions/77377733/@Url" class="lnk-underline" id="downloadLink">
Obtain
</a>
<a href="https://stackoverflow.com/questions/77377733/@Url" id="iconDownload">
<img src="/icons/obtain.svg" />
</a>
</div>
