Remove underline for an image inside a link - SCSS - html

Question

How do I get rid of the underline for the image inside the link in SCSS. Could anyone please help?
I created a working example using CodeSandbox
HTML
<p>
<a href="#">
Link
<span>
<img src="imagePath" alt="logo" />
</span>
</a>
</p>
SCSS
a {
text-decoration: none;
&:hover{
border-bottom: 1px solid red
}
}

Answer 1

As yiu can't alter the HTML, this snippet puts the underline on a pseudo element rather than on the actual element. The pseudo element is made to have the same width as the text ('Link') by using that as its content - which is slighly nasty as it means if the text of the Link changes the CSS/SCSS will also have to change.
a {
text-decoration: none;
position: relative;
}
a:hover::before {
content: 'Link';
position: absolute;
top: 0;
left: 0;
width: auto;
height: 100%;
border-bottom: 1px solid red;
z-index: 1;
}
<p>
<a href="#">
Link
<span>
<img src="imagePath" alt="logo" />
</span>
</a>
</p>

Answer 2

Try to put background color on span border-bottom:
body {
font-family: sans-serif;
}
a {
text-decoration: none;
border-bottom: 1px solid transparent;
}
a:hover{
border-bottom: 1px solid red;
}
a:hover span {
border-bottom: 1px solid white;
}
<div id="app">
<p>
<a href="#">
Link
<span>
<img
width="10"
src="https://bitsrc.imgix.net/3b69976526d31a20a1fd238f5a32a704cf437dd6.png"
alt="logo"
/>
</span>
</a>
</p>
</div>

Answer 3

We'll thats tricky and also not the best practices when it comes to frontend buuutt
Since you know the size of the image, you can add a fake border-bottom with the pseudo:after element with width 100% - [width-of-the-element]:
a {
text-decoration: none;
position:relative;
&:before{ // we initialize it before showing to avoid creating elements on interaction
position:absolute;
content:'';
left:0;
bottom:-2px;
border-bottom:1px solid red;
width:calc(100% - 10px - 0.2em); // the image is 10px and the space bar is ~0.2em
display:block;
opacity:0; // just some nice transitioning
transition:all .5s ease;
}
&:hover{
//border-bottom: 1px solid red;
&:before{
opacity:1;
}
}
}
<p>
<a href="#">
Link
<span>
<img
width="10" src="https://bitsrc.imgix.net/3b69976526d31a20a1fd238f5a32a704cf437dd6.png" alt="logo"
/>
</span>
</a>
</p>
Check here a working sample

Answer 4

There's a few different ways to do it but here's one that doesn't change your HTML flow. Since the image is inside the <a> and the border is being applied to the <a>, you can move the img outside the bounds of the <a> with positioning so it doesn't affect the width of the element and thus the border.
a
{
text-decoration: none;
position: relative;
&:hover{
border-bottom: 1px solid red;
}
img
{
position: absolute;
left: 100%;
padding-left: 5px;
padding-top: 3px;
}
}
The left is to push it to the outside of the element on the right side, and the padding-left and padding-top are to put it in roughly the same position it was in your sandbox.
Updated sandbox
An alternative would be to wrap the text inside the <a> in their own element, like a span, and then apply the border just to the span.

Answer 5

I would recommend wrapping your anchor text inside the span and using CSS to underline that. One thing to keep in mind is that border is going to add to the elements height and will cause a "jumping" effect when you add/remove the border. I would go about making sure a border is always present, but "hidden" when it's being hovered over. You can do this by either using "transparent" as a color or match the color with the background hex value.
https://codesandbox.io/s/cocky-rgb-6he0j
<p>
<a href="#">
<span>Link</span>
<img src="imagePath" alt="logo" />
</a>
</p>
body {
font-family: sans-serif;
}
a {
position: relative;
&, &:hover, span {
text-decoration: none;
}
span {
border-bottom: 1px solid transparent;
}
img {
position: absolute;
left: 100%;
padding-left: 5px;
padding-top: 3px;
}
&:hover span {
border-bottom-color: red;
}
}
EDIT: updated code formatting and added missing body styles