diff --git a/public/assets/tagsspaces.png b/public/assets/tagsspaces.png new file mode 100644 index 0000000..81b8cdb Binary files /dev/null and b/public/assets/tagsspaces.png differ diff --git a/src/posts/trailing-underlines.md b/src/posts/trailing-underlines.md new file mode 100644 index 0000000..ab6594e --- /dev/null +++ b/src/posts/trailing-underlines.md @@ -0,0 +1,47 @@ +--- +layout: "../layouts/BlogPost.astro" +title: "Removing trailing space underlines from groups of anchor tags" +slug: trailing-underlines +description: "Sometimes when you have a bunch of anchor tags, the trailing spaces around them are underlined. Here's how to fix that." +added: "Jun 14 2023" +tags: [technical] +--- + +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](/assets/tagsspaces.png) + +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 `
`, like so: + +```jsx +
+ {tags.map((tag) => ( + + #{tag} + + ))} +
+``` + +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.