0

I would like to remove underline under font awesome icon and add the icon with last word in new line. If I use the display:inline-block then it removes the underline then issue is, it is breaking the icon without last word in new line.

enter image description here

I am using the below code.

a.external-link::after {
    font-family: 'Font Awesome 5 Pro';
    content: 'a-a';
    background-color: white;
    font-weight: 400;
    margin-left: 4px;
    font-size: 10px;
    display:inline;
}
<a href="http://google.com" class="external-link">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod d
</a>

Instead of icon here I am using a-a.

Ashish
  • 103
  • 3

1 Answers1

0

You must set it as display inline-block. More here.

a.external-link::after {
    font-family: 'Font Awesome 5 Pro';
    content: 'a-a';
    background-color: white;
    font-weight: 400;
    margin-left: 4px;
    font-size: 10px;
    display:inline-block;
}
<a href="http://google.com" class="external-link">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod d
</a>
ruckie
  • 149
  • 14
  • Thank for your answer but when I add `display:inline-block` then icon break without adding last word in new line. – Ashish Sep 12 '22 at 11:19
  • When I check in smaller screen it is working as expected. Can you create sandbox with static width to analyze your problem? – ruckie Sep 12 '22 at 11:26
  • With you code as well I have tried code snippet and it is showing the icon only in next line (in my case `a-a` is the icon) without adding last word. – Ashish Sep 12 '22 at 11:27
  • Thats weird I see it on the one line. Check [screen](https://i.stack.imgur.com/ejpkE.png). – ruckie Sep 12 '22 at 11:30
  • Kindly check in the response mode (dimension : 500) – Ashish Sep 12 '22 at 11:41
  • I see, there is not enoug space for that character so it is in new line, but with width 512px it is still on one line and with less than 500px it is cropped to the new line but with other texts from link. – ruckie Sep 12 '22 at 11:57
  • Let us [continue this discussion in chat](https://chat.stackoverflow.com/rooms/247991/discussion-between-ruckie-and-ashish). – ruckie Sep 12 '22 at 12:21