Remove underline on focus from :before element [duplicate] - css

Question

This question already has answers here:
How do I not underline an element in a link?
(2 answers)
Closed 2 years ago.
I'm not able to remove the underline from the :before element.
As you can see from the image, I set the underline of the link during the focus event, but I'd like to have the only text underlined and not the icon.
This is the code for the icon:
a:before {
content: "\f058";
font-family: FontAwesome;
}
This is the code for the focus effect:
a:focus{
text-decoration:underline;
}
I tried something like this but it didn't work.
a:before:focus {
text-decoration:none;
}

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;
}
<span>Lorem ipsum</span>
if you cannot change the markup then you have to fake this behaviour, e.g. using a border with a pseudoelement
a {
text-decoration: none;
position: relative;
}
a::before {
content: "\f058";
font-family: FontAwesome;
width: 2ch;
display: inline-block;
}
a::after {
content: "";
position: absolute;
border: 1px solid currentColor;
left: 2ch;
bottom: 0;
right: 0;
}
a:focus::after {
border: none;
}
Lorem ipsum

Answer 2

Text-decoration when applied on a link "a", will result in the underlining on the icon too. Instead, you can use : The Unarticulated Annotation (Underline) element in your HTML code.
HTML code:
<u>Lorem Ipsum</u>
and then, style the in CSS:
u{
text-decoration: underline;
}