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

时间:2018-01-18 19:12:15

标签: html css wordpress

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

picture of problem

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

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

4 个答案:

答案 0 :(得分:4)

text-decoration位于a,而不是img

答案 1 :(得分:0)

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

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

答案 2 :(得分:0)

正如丹尼尔所说,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>

答案 3 :(得分:-1)

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

.custom-social a {
border:0;
}