remove hyperlink line between <a> tags-CodePudding

What do I need to do in order to remove the blue line between these icons (the line is a hyperlink)?

    <a href="https://discord.gg/Pu5cAuzs">
  <img  src="images/discord-64.png" alt="discord logo" >
</a>
<a href="https://twitter.com/CoinYour_art">
  <img  src="images/twitter-64.png" alt="twitter logo">
</a>

CSS

.social-icon {
padding-left: 5px;
padding-right: 5px;
width: 32px;
}

CodePudding user response：

Simply add text-decoration: none; to your a elements.

Here is an example

.social-icon {
  padding-left: 5px;
  padding-right: 5px;
  width: 32px;
}

a {
  text-decoration: none;
}

<a href="https://discord.gg/Pu5cAuzs">
  <img  src="https://e7.pngegg.com/pngimages/592/150/png-clipart-social-media-computer-icons-discord-computer-servers-social-media-logo-social-media-thumbnail.png" alt="discord logo">
</a>
<a href="https://twitter.com/CoinYour_art">
  <img  src="https://cdn4.iconfinder.com/data/icons/geomicons/32/672417-twitter-512.png" alt="twitter logo">
</a>

CodePudding user response：

text-decoration: none should work. It removes the underline from the anchor tag.

CodePudding user response：

you can try like that:

<a href="https://discord.gg/Pu5cAuzs" >
  <img  src="images/discord-64.png" alt="discord logo" >
</a>
<a href="https://twitter.com/CoinYour_art" >
  <img  src="images/twitter-64.png" alt="twitter logo">
</a>

CSS:

.social-icon {
padding-left: 5px;
padding-right: 5px;
width: 32px;
}
.img-link{
  text-decoration: none;
}

and here is codepen demo: demo