如何去除footer中a标签内SVG图标下方的蓝色下划线？

嘿，这个问题我可太熟悉了！你当前的核心问题是蓝色小线条（下划线）来自外层的<a>标签，而非你加了.icon类的<img>标签，所以给img设置text-decoration: none完全没作用哦。

给你几个亲测有效的解决方法：

方法1：直接给<a>标签移除下划线 #

这是最直接的方案，把样式加在链接标签上：

/* 精准定位页脚里的图标链接，避免影响页面其他链接 */
footer ul li a {
  text-decoration: none;
  outline: none; /* 你之前加的outline可以移到这里 */
}

如果不想全局影响页脚所有链接，也可以给图标链接单独加类：

<a href="https://github.com/--/" class="icon-link">
  <img src="images/github.svg" class="icon">
</a>

对应的CSS：

.icon-link {
  text-decoration: none;
  outline: none;
}
.icon {
  width: 3%;
  height: 3%;
}

方法2：调整图片对齐方式消除间隙 #

有时候下划线会因为图片和文字基线对齐产生的小间隙显现出来，配合去下划线一起用更稳妥：

.icon {
  width: 3%;
  height: 3%;
  vertical-align: middle; /* 让图片和容器垂直居中对齐 */
  /* 或者直接把图片设为块级元素，彻底消除间隙 */
  /* display: block; */
}
footer ul li a {
  text-decoration: none;
}

方法3：兼容老浏览器（可选） #

如果需要兼容IE这类老浏览器，可能会出现图片的蓝色边框，记得加上：

.icon {
  border: none;
}

为什么之前的样式没用？ #

默认情况下，<a>标签自带text-decoration: underline样式，你的.icon类是应用在<img>元素上的，根本没有作用到<a>标签的下划线样式，所以蓝色线条才会顽固地存在~

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