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