How to remove border for font awesome icon inside anchor tag

user_3283738 0
Viewed 44

We are using border-bottom property to add border for the anchor tag and adding font awesome icon along with the anchor tag.

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

It is adding the border under font awesome icon as well. We would like to remove border for font awesome icon in anchor tag.

Is it possible ?

css html
1 Answers

If you can't change your html, then you could move your icon outside your anchor using absolute positioning

.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

user_17909820
Related