I've done some research.
The reason for the extended line is a whitespace in the HTML between the icon and the text.
This is not easy to remove, but can be done via JavaScript.
Something like this should do the trick
let links = document.querySelectorAll('a.mx-link');
links.forEach(link => {
let linkText = link.innerHTML;
let icon = linkText.substring(0, linkText.search('</span>') + 7);
let text = linkText.substring(linkText.search('</span>') + 7);
link.innerHTML = icon + text.trimStart();
});
Hope this helps!
See https://stackoverflow.com/questions/48583982/underline-a-and-span-like-a-whole-link but it is not easily translated to the Mendix structure.
I mean, the underline extends to the left, but I only want it under the text. But why is it extending by default? If I don't use an icon or image, the underline is only under the text, why not with an icon or image?