从 :before element

如何解决从 :before element

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

正如您从图片中看到的，我在焦点事件期间设置了链接的下划线，但我希望只有文本有下划线，而不是图标。

这是图标的代码：

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

这是焦点效果的代码：

a:focus{    
    text-decoration:underline;  
}

我尝试过类似的方法，但没有奏效。

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

解决方法

在链接内使用 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>

,

在链接“a”上应用文本装饰时，也会导致图标上的下划线。相反，您可以在 HTML 代码中使用：Unarticulated Annotation（下划线）元素。

HTML 代码：

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

然后，在 CSS 中设置样式：

u{
  text-decoration: underline;
}