Remove underline on focus from :before element

Question

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;    
}

display:inline-block to the before – Temani Afif Jan 28 '21 at 08:16 — Temani Afif, Jan 28 '21 at 08:16

Fabrizio Calderan · Accepted Answer · 2021-01-28T08:22:51.850

3

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>

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;
}

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

edited Jan 28 '21 at 08:22

answered Jan 28 '21 at 08:12

Fabrizio Calderan

120,726
26
164
177

Thank you. I was wondering if was possibile to combine :before and :focus without editing the HTML code. Anyway, I'll follow your advice. Saluti da Roma. – Matt Jan 28 '21 at 08:16
Hold my beer and wait 5 minutes – Fabrizio Calderan Jan 28 '21 at 08:19
@Matt, look at my second snippet – Fabrizio Calderan Jan 28 '21 at 08:23

score -1 · Answer 2 · answered Jan 28 '21 at 08:15

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:

<a href="https..//.."><u>Lorem Ipsum</u></a>

and then, style the in CSS:

u{
  text-decoration: underline;
}

Remove underline on focus from :before element

2 Answers2