Custom underline in css under links, any ideas?

[Edrol97]

Hi all, I would like to add a custom underline to links on my site. Does anyone know how to add a drawn style, similar to this to a custom font. There is no way to do it with the font builder I built the font with and I'm wondering if it's possible with a combination of html, css, and JS? As always any help appreciated.

 

[JosiahMaybe]

If you want like that then if it is like only can be one line then a background img element might suffice and if that won't work then maybe make a canvas element and draw to it as background. Be sure to set z or be careful what is first or last, maybe set top and left same on your background and link. If you need animation when clicked maybe a canvas background and program is best. X E.

 

[tomliv]

You might be able to get this effect with border-image. A bit tricky to get it on only the bottom but I believe possible.

border-image - CSS: Cascading Style Sheets | MDN

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

developer.mozilla.org

How to use border image along one side only?

I have an image that I'd like to set as the border on an element, but only as the bottom border: <- It's teeny - but it's right there. Here is what I've got so far: <style> body { margi...

stackoverflow.com

Note the accepted answer at the stack overflow link uses border-width: 0 0 2px; This is the trick I believe. I haven't tried it.