Search code examples
csspseudo-class

Remove underline on focus from :before element

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.

enter image description here

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

  • 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>