Removing trailing space underlines from groups of anchor tags

Recently as I was working on some styles for my blog, I ran into an issue where I had a block of anchor tags rendered in JSX, and they didn't look right.

All of the links had trailing spaces, and those spaces were being underlined!

How did we get here?

I had an array of tags, and they were being displayed in a <div>, like so:

<div>
    {
        tags.map((tag) => (
            <a class="tag" href={`#`}>
                #{tag}
            </a>
        ))
    }
</div>

I didn't fully understand why the underlined, trailing space was being rendered, and weeped as the gods of JavaScript mocked me.

After getting over it, I tried changing the word-wrap and other various CSS styles to fix the links, with no success. I admit it took me way longer than I expected to find a solution, and I wrote this blog to save me from my future self who will inevitably run into this problem again.

How did we overcome?

Turns out, if you add display: inline-block, it removes the underlines in the spaces!

Here's a CodePen to show this lil CSS trick in action!

The end, stay safe, nerds.

Comments

[Sally Chen]

i've definitely ran into this before - didn't know that display: inline-block fixes it! thanks for sharing!

[Philip John Basile]

Neat!!

[Sébastien LeBlanc]

That has nothing to do with JSX, you clearly have whitespace between your word and the end tag (the newline).

If you don't want the whitespace, don't add one ? 😅

<a class="tag" href={`#`}>#{tag}</a>

[z0al]

Thank you for sharing.

Was the trailing space part the link label? Or is it due to JSX somehow? I didn't fully understand that that part.

[Cassidy Williams]

It was due to JSX somehow 🙃
I ended up controlling the spacing a bit differently like this:
github.com/cassidoo/blahg/blob/mai...