如何使用SCSS去除a链接内部嵌套图片的下划线效果

问题原因 #

你当前是给整个<a>标签的hover状态添加了border-bottom属性，边框会铺满整个a元素的底部宽度，包含内部嵌套图片的区域，所以看起来像是图片也附带了下划线。

解决方案 #

方案1：不修改现有HTML结构，仅调整SCSS

如果不想改动原有HTML代码，可以通过样式覆盖的方式隐藏图片区域的下划线，SCSS代码如下：

a {
  text-decoration: none;
  &:hover{
    border-bottom: 1px solid red;
  }
  // 选中包裹图片的span元素
  span {
    display: inline-block;
    // 向下偏移1px，让自身底部刚好覆盖住a的边框
    position: relative;
    bottom: -1px;
    // 用和页面背景同色的底边框盖住a的红色边框
    border-bottom: 1px solid #ffffff;
  }
}

如果你的页面背景不是纯色，可以用伪元素遮挡，写法如下：

a {
  text-decoration: none;
  &:hover{
    border-bottom: 1px solid red;
  }
  span {
    position: relative;
    display: inline-block;
    &::after {
      content: '';
      position: absolute;
      left: 0;
      bottom: -1px;
      width: 100%;
      height: 1px;
      // 继承父级背景来遮挡边框，适合非纯色背景场景
      background: inherit;
    }
  }
}

方案2：最优兼容方案，修改少量HTML结构

仅给链接文字单独加下划线，从根源避免影响内部嵌套元素，修改后的HTML如下：

<p>
  <a href="#">
    <span class="link-text">Link</span>
    <span>
      <img src="imagePath" alt="logo" />
    </span>
  </a>
</p>

对应SCSS只给文字部分加hover边框：

a {
  text-decoration: none;
  .link-text:hover {
    border-bottom: 1px solid red;
  }
}

这个方案兼容性最好，没有样式冲突风险，优先推荐使用。

内容的提问来源于stack exchange，提问作者krsna