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
 }
}

CodePudding user response：

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>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Try to put background color on span border border:

body {
  font-family: sans-serif;
}

a {
  text-decoration: none;
}
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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

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.

CodePudding user response：

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