raqulka raqulka - 2 days ago 3
CSS Question

Weird blue underline on svg hover

I have svg for social media icon and everytime I hover on it, it creates this blue underline and nothing seems to take it off. How can I remove it?

enter image description here

Here's how I include it.

<a class="footer-socialmedia-icons" style="padding-right:0.5rem;" target="_blank" href="https://www.facebook.com">
<img width="35px" height="35px" src="/files/IMG/facebook.svg" alt="facebook logo" class="">
</a>


EDIT:
here's the svg:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg width="50px" height="50px" viewBox="0 0 50 50" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<!-- Generator: Sketch 41.1 (35376) - http://www.bohemiancoding.com/sketch -->
<title>facebook</title>
<desc>Created with Sketch.</desc>
<defs></defs>
<g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g id="facebook" fill="#DBC5DA">
<path d="M24.826,0 C11.137,0 0,11.137 0,24.826 C0,38.514 11.137,49.652 24.826,49.652 C38.514,49.652 49.652,38.514 49.652,24.826 C49.652,11.137 38.516,0 24.826,0 Z M31,25.7 L26.961,25.7 L26.961,40.096 L20.976,40.096 L20.976,25.7 L18.131,25.7 L18.131,20.612 L20.976,20.612 L20.976,17.321 C20.976,14.964 22.096,11.281 27.016,11.281 L31.451,11.298 L31.451,16.237 L28.232,16.237 C27.708,16.237 26.963,16.499 26.963,17.623 L26.963,20.613 L31.523,20.613 L31,25.7 Z" id="Shape"></path>
</g>
</g>
</svg>


EDIT



As it turns out, the blue line is underneath all tags. Tried
text-decoration:none
on but it doesn't do a thing.

Answer

Some browsers add a border to images in a elements to show them as clickable links.

If you don't want that, add

a img {border:none}

to your CSS.
This is not connected to SVG by the way; it happens on all images inside links.

Comments