svg expand hover

[Edrol97]

Hi,

I'm wondering, I would ideally like a new svg underline that I've installed on my site, to span the entire url-linked text, but how would I ensure this in my css?

Link for inspection.

All the best,

Eliot

 

[tomliv]

@Edrol97 I'd suggest you make your link display: inline-block and try border-image.

border-image CSS property - CSS | MDN

The border-image CSS shorthand property draws an image around a given element. It replaces the element's regular border.

developer.mozilla.org

 

[tomliv]

@Edrol97 Upon further poking around, I am not able to find anything that would work - especially on text that wraps. Maybe the whole link is an image?

 

[Edrol97]

@Edrol97 Upon further poking around, I am not able to find anything that would work - especially on text that wraps. Maybe the whole link is an image?

Hi Tom, unsure what you mean by this. This is the image (attached in xml) that I want to use as an underline for links on hover, however, it comes up short. and doesn't auto extend as the png I previously used did.

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400.91 39.76">
  <path d="M185.02,21.49c49.79-2.51,99.67-3.31,149.51-2.33,11.83.23,23.72,1.04,35.55.92,4.59-.05,9.15-.09,13.73-.05l.95.17c.93.51,1.19.44.78-.23l-.18-.47c1.29-2.64.87-3.39-1.26-2.26-2.61-.73-6.79.17-9.59.14-25.46-.31-50.92-.27-76.38-.14s-50.82.05-76.2.9c-24.7.82-49.29,3.65-74.01,3.87-25.09.22-50.16-1.29-75.26-.46-12.41.41-24.81,1.16-37.22,1.74-5.37.25-11.27,1.15-16.62.3-.86-.14-3.37-1.47-3.95-1.23l.25,4.23c.52-.42,1.11-.67,1.79-.75,1.19-.1,2.28-.33,3.51-.34,12.09-.1,24.27,1.26,36.38,1.34,14.2.1,28.39-.21,42.58-.75,28.57-1.09,57.09-3.11,85.63-4.57,8.24-.42,8.29-13.29,0-12.86-28.22,1.45-56.41,3.43-84.65,4.54-14.51.57-29.04.9-43.57.79-12.11-.09-24.31-1.51-36.38-1.34-4.47.06-9.07.83-12.72,3.56-4.46,3.33-6.61,9.02-3.04,13.88,6.73,9.17,22.13,6.49,31.76,6.03,28.12-1.33,56-2.13,84.16-1.52,13.66.3,27.34.52,41-.04s28.4-1.94,42.61-2.75c28.3-1.61,56.69-1.48,85.03-1.64,28.11-.16,56.21-.24,84.32.08,8.4.1,28.06-.12,24.25-14.15-3.02-11.1-18.38-9.04-26.94-8.87-14.95.28-30.02-.82-44.97-1.05s-31.33-.31-47-.21c-31.29.21-62.58,1.12-93.83,2.7-8.24.42-8.29,13.28,0,12.86Z"/>
</svg>

 

[tomliv]

Hi Tom, unsure what you mean by this. This is the image (attached in xml) that I want to use as an underline for links on hover, however, it comes up short. and doesn't auto extend as the png I previously used did.

<?xml version="1.0" encoding="UTF-8"?>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 400.91 39.76">
  <path d="M185.02,21.49c49.79-2.51,99.67-3.31,149.51-2.33,11.83.23,23.72,1.04,35.55.92,4.59-.05,9.15-.09,13.73-.05l.95.17c.93.51,1.19.44.78-.23l-.18-.47c1.29-2.64.87-3.39-1.26-2.26-2.61-.73-6.79.17-9.59.14-25.46-.31-50.92-.27-76.38-.14s-50.82.05-76.2.9c-24.7.82-49.29,3.65-74.01,3.87-25.09.22-50.16-1.29-75.26-.46-12.41.41-24.81,1.16-37.22,1.74-5.37.25-11.27,1.15-16.62.3-.86-.14-3.37-1.47-3.95-1.23l.25,4.23c.52-.42,1.11-.67,1.79-.75,1.19-.1,2.28-.33,3.51-.34,12.09-.1,24.27,1.26,36.38,1.34,14.2.1,28.39-.21,42.58-.75,28.57-1.09,57.09-3.11,85.63-4.57,8.24-.42,8.29-13.29,0-12.86-28.22,1.45-56.41,3.43-84.65,4.54-14.51.57-29.04.9-43.57.79-12.11-.09-24.31-1.51-36.38-1.34-4.47.06-9.07.83-12.72,3.56-4.46,3.33-6.61,9.02-3.04,13.88,6.73,9.17,22.13,6.49,31.76,6.03,28.12-1.33,56-2.13,84.16-1.52,13.66.3,27.34.52,41-.04s28.4-1.94,42.61-2.75c28.3-1.61,56.69-1.48,85.03-1.64,28.11-.16,56.21-.24,84.32.08,8.4.1,28.06-.12,24.25-14.15-3.02-11.1-18.38-9.04-26.94-8.87-14.95.28-30.02-.82-44.97-1.05s-31.33-.31-47-.21c-31.29.21-62.58,1.12-93.83,2.7-8.24.42-8.29,13.28,0,12.86Z"/>
</svg>

@Edrol97 What I mean is I can't find a way to do what you are trying to do so I am suggesting you could make the text an image and swap it on hover with an image of the text with the underline you want. Make sure to add alt text to the image and scale it for responsive. Otherwise I'd suggest leaving a normal underline on HTML text.