Custom underline as font in <a>

Question

I want to add a custom underline in <a> as a font. I've converted my underline SVG to the font from https://fontello.com/. I want the underline behavior to be the same as text-decoration. Like It should be shown as per the text size even in multiple lines.

As of now, I'm seeing the underline in specific width. Which was the size of my SVG image that I've converted to the font.

The line should be displayed as long as my anchor element even in multiple lines.

Here, is the code that I've used.

HTML:

<a href="#">15 Results 15 Results 15 Results</a>

CSS:

a {
    position: relative;
}

a::before {
    content: '\e800';
    font-family: fontello;
    position: absolute;
    bottom: -100%;
    left: 0;
    width: 100%;
}

Also, share the ideas if I can achieve this underline design in any other way instead of using it as a font. The only customization I need is to change the color of the underline using CSS.

Let me know if anyone has any ideas.

Thanks