如何删除锚标签内字体真棒图标的边框

Question

我们使用border-bottom属性为锚标签添加边框，并在锚标签中添加字体真棒图标。

<a href="google.com" class="link">
  "Test data"
  ::after
</a>

CSS :-

a.link {
  border-bottom: 1px solid black;

  &::after {
    font-family: 'Font Awesome 5 Pro';
    content: '\f08e';
    font-size: 14px;
  }
}

它也在字体真棒图标下添加边框。 我们想删除锚标记中字体真棒图标的边框。

可能吗 ？

Answer 1

如果您无法更改 html，则可以使用绝对定位将图标移到锚点之外

 .test { border-bottom: 1px solid black; position: relative; margin-right: 1.5em; /* needs enough margin so the icon can sit there */ } .test::after { content: 'a'; display: inline-block; position: absolute; left: 100%; padding-left:0.5em; }

 <a class="test" href="#">some text</a> some other text