从链接的图像中删除下划线

Question

我正在我的网站（Wordpress）上添加自定义社交媒体图标链接，并且有一条顽固的行，就像超链接一样贯穿它们。当鼠标悬停在图像上时，该线条消失，只需链接页面上的其他超链接。

这是用于创建它们的代码：

.custom-social img {
  text-decoration: none;
  margin-right: 20px;
}

<div class="custom-social">
  <a href="http://twitter.com/mrsideproject">
    <img title="Twitter" alt="Twitter" src="http://coinpages.co/wp-content/uploads/2018/01/twitter-badge.png" width="35" height="35" />
  </a>
  <a href="http://medium.com/@mrsideproject">
    <img title="Medium" alt="Medium" src="http://coinpages.co/wp-content/uploads/2018/01/medium-logo.png" width="35" height="35" />
  </a>
  <a href="http://instagram.com/mrsideproject">
    <img title="Instagram" alt="Instagram" src="http://coinpages.co/wp-content/uploads/2018/01/Instagram-badge.png" width="29" height="30" />
  </a>
</div>

Answer 1

text-decoration位于a，而不是img。

Answer 2

在锚标记中添加文本修饰。使用Css：

.custom-social a {
  text-decoration: none;
  margin-right: 20px;
}

Answer 3

正如丹尼尔所说，text-decoration:none应该在锚标签上。

.custom-social a {
  text-decoration: none;
}

.custom-social img{
  margin-left:20px;
}

<div class="custom-social">
  <a href="http://twitter.com/mrsideproject">
    <img title="Twitter" alt="Twitter" src="http://coinpages.co/wp-content/uploads/2018/01/twitter-badge.png" width="35" height="35" />
  </a>
  <a href="http://medium.com/@mrsideproject">
    <img title="Medium" alt="Medium" src="http://coinpages.co/wp-content/uploads/2018/01/medium-logo.png" width="35" height="35" />
  </a>
  <a href="http://instagram.com/mrsideproject">
    <img title="Instagram" alt="Instagram" src="http://coinpages.co/wp-content/uploads/2018/01/Instagram-badge.png" width="29" height="30" />
  </a>
</div>

Answer 4

好的，我明白了！不完全确定为什么文字装饰没有任何效果但是这样做了诀窍：

.custom-social a {
border:0;
}