从 :before 元素中删除焦点上的下划线

Question

我无法从 :before 元素中删除下划线。

从图片中可以看出，我在焦点事件期间设置了 link 的下划线，但我希望只有文本而不是图标有下划线。

这是图标的代码：

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

这是焦点效果的代码：

a:focus{    
    text-decoration:underline;  
}

我试过类似的方法，但没有用。

a:before:focus  {
   text-decoration:none;    
}

Answer 1

在 link 中使用 span 并在内部元素上应用 text-decoration: underline

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>

如果您不能更改标记，那么您必须伪造这种行为，例如使用带有伪元素的边框

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>

Answer 2

文本修饰应用于 link“a”时，也会在图标上显示下划线。相反，您可以在 HTML 代码中使用：未表达的注释（下划线）元素。

HTML代码：

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

然后，在 CSS:

中设置样式

u{
  text-decoration: underline;
}

从 :before 元素中删除焦点上的下划线

Remove underline on focus from :before element

css

pseudo-class