从 :before 元素中删除焦点上的下划线 [重复]答案

【问题标题】：Remove underline on focus from :before element [duplicate]从 :before 元素中删除焦点上的下划线 [重复]
【发布时间】：2021-01-28 16:22:51
【问题描述】：

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

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

这是图标的代码：

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

这是焦点效果的代码：

a:focus{    
    text-decoration:underline;  
}

我尝试了类似的方法，但没有成功。

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

【问题讨论】：

display:inline-block 到前面

标签： css pseudo-class

【解决方案1】：

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

a { 
    text-decoration: none; 
}


a span {
    text-decoration: underline;
    padding-left: .5em;
}

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

&lt;a href="#"&gt;&lt;span&gt;Lorem ipsum&lt;/span&gt;&lt;/a&gt;

如果您无法更改标记，则必须伪造此行为，例如使用带有伪元素的边框

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

&lt;a href="#"&gt;Lorem ipsum&lt;/a&gt;

【讨论】：

谢谢。我想知道是否可以在不编辑 HTML 代码的情况下组合 :before 和 :focus 。无论如何，我会听从你的建议。向罗马致敬。
拿着我的啤酒，等 5 分钟
@Matt，看看我的第二个 sn-p

【解决方案2】：

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

HTML 代码：

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

然后，在 CSS 中设置样式：

u{
  text-decoration: underline;
}

【讨论】：