9

Removing trailing space underlines from groups of anchor tags

 1 year ago
source link: https://dev.to/cassidoo/removing-trailing-space-underlines-from-groups-of-anchor-tags-54ib
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

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>

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.


report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK