remove hyperlink line between <a> tags

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

blue line between icons

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

CSS

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

>Solution :

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 class="social-icon" 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 class="social-icon" src="https://cdn4.iconfinder.com/data/icons/geomicons/32/672417-twitter-512.png" alt="twitter logo">
</a>

Leave a Reply