Swoosh underline on hover (CSS)

As I mentioned in my last post, I’m finally working on reskinning my personal blog and using Gatsby to build the site. I am also taking Wes Bos’s Master Gatsby course and realized that menus don’t need to be as static and boring as they historically have been. Since you can do almost anything with CSS, I decided to attempt a swoosh underline on hover, and it was more challenging than I expected.

Basic layout of the Nav is pretty dry markup:

<ul>
  <li>
    <Link to="/about">about</Link>
  </li>
  <li>
    <Link to="/projects">projects</Link>
  </li>
  <li>
    <Link to="/contact">contact</Link>
  </li>
</ul>

Using styled-components, I could experiment with different colors and treatments on the fly. You can see the result on the page above, but here is how I landed on the swoosh:

const StyledNav = styled.nav`
  display: flex;
  justify-content: flex-end;

  ul {
    list-style-type: none;
    display: flex;

    li {
      margin-right: 1rem;
      font-size: 1.25rem;

      a {
        padding: 0.5rem;
        text-decoration: none;
        border: solid transparent;
        border-width: 0 0 thick 10px;
      }

      a:hover {
        color: purple;
        border: solid purple;
        border-width: 0 0 thick 10px;
        border-color: transparent purple purple transparent;
        border-radius: 0 0 20px 0;
      }
    }
  }
`

Wrap the dry unordered list with the component, and voila! The key to not having janky hover styles is to ensure that your padding, margin, and borders are consistent between hover and non-hover states. Using transparent as the color helps with the borders width.