I've got a problem. I've recently added the following CSS to my site, which automatically adds an arrow symbol after outgoing links.

a[href^="http"]:not(:has(img))::after {
content: "⭜";
}

• The good thing: It works. Yay.
• The problem: It adds a gap between the line of text the link is in and the one below. You can see examples on my links page.
• The questions: Why? And is there a way to get rid of that gap? It seems to be connected to the arrow symbol itself? Can that be? I don't even know how to look for solutions. Does anyone have a tip on where to look for one?

Edit: Maybe I should add that this is happening in Firefox. It does not happen in Safari on my phone, but there the arrow isn't visible to begin with. Different problem.

Edit 2: So far, thank you all so much for your replies. I'll go through them one by one. This may take a bit.
I'm adding a screenshot of how it looks on my laptop, which runs Fedora Linux with Firefox. If I inspect the page and untick the line content: "⭜";, the gap is gone.

#CSS #personalWeb #smallWeb #indieWeb