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!

See the Pen Underlined spaces in blocks of links by Cassidy (@cassidoo) on CodePen.

The end, stay safe, nerds.