css - Remove underline on focus from :before element

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65933156/remove-underline-on-focus-from-before-element

Answer 1

Use a span inside the link and apply text-decoration: underline on the inner element

a { 
    text-decoration: none; 
}


a span {
    text-decoration: underline;
    padding-left: .5em;
}

a::before  {
    content: "f058";
    font-family: FontAwesome;
} 

<a href="#"><span>Lorem ipsum</span></a>