DEV Community

Cover image for Removing trailing space underlines from groups of anchor tags
Cassidy Williams
Cassidy Williams

Posted on • Originally published at blog.cassidoo.co

12 4 3 2 2

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.

A list of tags with trailing spaces that were underlined

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>


Enter fullscreen mode Exit fullscreen mode

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.

Image of Timescale

🚀 pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applications—without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more →

Top comments (5)

Collapse
 
sallychenyx9 profile image
Sally Chen

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

Collapse
 
philipjohnbasile profile image
Philip John Basile

Neat!!

Collapse
 
mrleblanc101 profile image

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>

Collapse
 
z0al profile image
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.

Collapse
 
cassidoo profile image
Cassidy Williams • Edited

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

Image of Docusign

🛠️ Bring your solution into Docusign. Reach over 1.6M customers.

Docusign is now extensible. Overcome challenges with disconnected products and inaccessible data by bringing your solutions into Docusign and publishing to 1.6M customers in the App Center.

Learn more